Aurora (CSS)
Soft warm colour blobs drift slowly over a dark background, made with CSS only; a lightweight mood background for a hero without WebGL.
Energieadvies Noord
Warmte die blijft.
How to use it
- Paste the HTML where the backgrounds & webgl should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Aurora (CSS) · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-aur"><span class="ei-aur__b ei-aur__b--1"></span><span class="ei-aur__b ei-aur__b--2"></span><span class="ei-aur__b ei-aur__b--3"></span><span class="ei-aur__b ei-aur__b--4"></span><span class="ei-aur__n"></span><div class="ei-aur__t"><span>Energieadvies Noord</span><h3>Warmte die blijft.</h3></div></div>
</div>/* Aurora (CSS) · NedDev · eigen werk. */
.ei-aur{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;isolation:isolate}
.ei-aur__b{position:absolute;border-radius:50%;filter:blur(40px);opacity:.75;mix-blend-mode:screen;will-change:transform}
.ei-aur__b--1{width:60%;height:80%;left:-10%;top:30%;background:#F5480F;animation:ei-aur-a 16s ease-in-out infinite alternate}
.ei-aur__b--2{width:50%;height:70%;right:-8%;top:-20%;background:#ff9a3c;opacity:.55;animation:ei-aur-b 19s ease-in-out infinite alternate}
.ei-aur__b--3{width:45%;height:60%;left:30%;top:45%;background:#b8250a;animation:ei-aur-c 13s ease-in-out infinite alternate}
.ei-aur__b--4{width:30%;height:40%;left:20%;top:-10%;background:#f4e6d6;opacity:.25;animation:ei-aur-b 23s ease-in-out infinite alternate-reverse}
@keyframes ei-aur-a{to{transform:translate(35%,-30%) scale(1.15)}}
@keyframes ei-aur-b{to{transform:translate(-40%,30%) scale(.85)}}
@keyframes ei-aur-c{to{transform:translate(-30%,-45%) scale(1.25)}}
.ei-aur__n{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,transparent 40%,rgba(10,10,10,.55));z-index:1}
.ei-aur__t{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff}
.ei-aur__t span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.ei-aur__t h3{margin:8px 0 0;font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(18px,3.6vw,24px);line-height:1.4}
@media(prefers-reduced-motion:reduce){.ei-aur__b{animation:none}}More backgrounds & webgl
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →