12 CSS Ripple Effects12 / 12

CSS + JSMIT licensed

CSS Aurora Borealis Ripple Background

A night-sky hero with four drifting blur-filtered aurora blob layers (mix-blend-mode: screen), concentric ripple rings expanding from multiple anchor points in teal, indigo and cyan, 80 JS-seeded twinkling stars and floating editorial badges. Cormorant Garamond + Outfit on deep #020617 midnight.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div class="rpl-12">
  <!-- Aurora blobs -->
  <div class="rpl-12__aurora">
    <div class="rpl-12__blob rpl-12__blob--a"></div>
    <div class="rpl-12__blob rpl-12__blob--b"></div>
    <div class="rpl-12__blob rpl-12__blob--c"></div>
    <div class="rpl-12__blob rpl-12__blob--d"></div>
  </div>

  <!-- Ripple rings -->
  <div class="rpl-12__ripple-field">
    <div class="rpl-12__arc rpl-12__arc--t1"></div>
    <div class="rpl-12__arc rpl-12__arc--t2"></div>
    <div class="rpl-12__arc rpl-12__arc--t3"></div>
    <div class="rpl-12__arc rpl-12__arc--t4"></div>
    <div class="rpl-12__arc rpl-12__arc--i1"></div>
    <div class="rpl-12__arc rpl-12__arc--i2"></div>
    <div class="rpl-12__arc rpl-12__arc--i3"></div>
    <div class="rpl-12__arc rpl-12__arc--c1"></div>
    <div class="rpl-12__arc rpl-12__arc--c2"></div>
  </div>

  <!-- Stars -->
  <div class="rpl-12__stars" id="rpl-12-stars"></div>

  <!-- Floating labels -->
  <div class="rpl-12__badge rpl-12__badge--1">Pure CSS</div>
  <div class="rpl-12__badge rpl-12__badge--2">No Canvas</div>
  <div class="rpl-12__badge rpl-12__badge--3">CSS Ripple</div>
  <div class="rpl-12__badge rpl-12__badge--4">Keyframes</div>

  <!-- Main content -->
  <div class="rpl-12__content">
    <div class="eyebrow">Aurora Ripple Effect</div>
    <h1>Where<br>light <em>ripples</em><br>endlessly.</h1>
    <p>Aurora blobs drift across a starfield while concentric rings expand outward — layered CSS gradients, blur filters and keyframe animations. Zero JavaScript for the background.</p>
    <div class="rpl-12__ctas">
      <a href="#" class="rpl-12__cta rpl-12__cta--primary">Explore Effect →</a>
      <a href="#" class="rpl-12__cta rpl-12__cta--ghost">View Source</a>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Outfit:wght@300;400;500&display=swap');

.rpl-12,
.rpl-12 *,
.rpl-12 *::before,
.rpl-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-12 ::selection {
  background: #a5f3fc;
  color: #020617;
}

.rpl-12 {
  font-family: 'Outfit', sans-serif;
  background: #020617;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
/* ─── Aurora layers: radial blobs that drift and pulse ─── */

.rpl-12__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Blob A — teal/green */

.rpl-12__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: rpl-12-drift ease-in-out infinite alternate;
}

.rpl-12__blob--a {
  width: 70vw;
  height: 50vh;
  top: -10%;
  left: -10%;
  background: radial-gradient(ellipse, rgba(52,211,153,0.4) 0%, rgba(16,185,129,0.2) 50%, transparent 100%);
  animation-duration: 12s;
}

.rpl-12__blob--b {
  width: 60vw;
  height: 60vh;
  top: 20%;
  right: -15%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.35) 0%, rgba(79,70,229,0.15) 50%, transparent 100%);
  animation-duration: 16s;
  animation-delay: -4s;
}

.rpl-12__blob--c {
  width: 55vw;
  height: 45vh;
  bottom: -10%;
  left: 20%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.3) 0%, rgba(14,165,233,0.15) 50%, transparent 100%);
  animation-duration: 10s;
  animation-delay: -7s;
}

.rpl-12__blob--d {
  width: 40vw;
  height: 35vh;
  top: 30%;
  left: 30%;
  background: radial-gradient(ellipse, rgba(167,243,208,0.25) 0%, rgba(52,211,153,0.1) 50%, transparent 100%);
  animation-duration: 20s;
  animation-delay: -10s;
}

@keyframes rpl-12-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(4%, 6%) scale(1.08);
  }

  66% {
    transform: translate(-3%, 4%) scale(0.95);
  }

  100% {
    transform: translate(6%, -4%) scale(1.05);
  }
}
/* ─── Ripple rings that expand from center ─── */

.rpl-12__ripple-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rpl-12-ring ease-out infinite;
}
/* Teal rings */

.rpl-12__arc--t1 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.6);
  animation-duration: 6s;
  animation-delay: 0s;
}

.rpl-12__arc--t2 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.35);
  animation-duration: 6s;
  animation-delay: 1.5s;
}

.rpl-12__arc--t3 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.18);
  animation-duration: 6s;
  animation-delay: 3.0s;
}

.rpl-12__arc--t4 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.08);
  animation-duration: 6s;
  animation-delay: 4.5s;
}
/* Indigo rings */

.rpl-12__arc--i1 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.5);
  animation-duration: 8s;
  animation-delay: 2s;
}

.rpl-12__arc--i2 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.25);
  animation-duration: 8s;
  animation-delay: 4s;
}

.rpl-12__arc--i3 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.12);
  animation-duration: 8s;
  animation-delay: 6s;
}
/* Cyan rings — slightly offset */

.rpl-12__arc--c1 {
  width: 100px;
  height: 100px;
  border-color: rgba(34,211,238,0.45);
  animation-duration: 9s;
  animation-delay: 1s;
  top: 40%;
  left: 55%;
}

.rpl-12__arc--c2 {
  width: 100px;
  height: 100px;
  border-color: rgba(34,211,238,0.22);
  animation-duration: 9s;
  animation-delay: 3.5s;
  top: 40%;
  left: 55%;
}

@keyframes rpl-12-ring {
  0% {
    transform: translate(-50%,-50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%,-50%) scale(14);
    opacity: 0;
  }
}
/* Stars */

.rpl-12__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rpl-12-twinkle ease-in-out infinite alternate;
}

@keyframes rpl-12-twinkle {
  to {
    opacity: 0.1;
    transform: scale(0.6);
  }
}
/* Content */

.rpl-12__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
}

.rpl-12__content .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(165,243,252,0.6);
  margin-bottom: 20px;
  border: 1px solid rgba(165,243,252,0.2);
  border-radius: 40px;
  padding: 6px 16px;
}

.rpl-12__content h1 {
  font-family: 'Cormorant Garamond';
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 300;
  line-height: 0.9;
  color: #f0fdff;
  letter-spacing: -0.01em;
}

.rpl-12__content h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #5eead4, #22d3ee, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rpl-12__content p {
  margin-top: 24px;
  font-size: 1rem;
  color: rgba(240,253,255,0.5);
  line-height: 1.7;
  font-weight: 300;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.rpl-12__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.rpl-12__cta {
  padding: 14px 30px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}

.rpl-12__cta--primary {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff;
  box-shadow: 0 8px 32px rgba(99,102,241,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.rpl-12__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(99,102,241,0.5);
}

.rpl-12__cta--ghost {
  border: 1px solid rgba(165,243,252,0.25);
  color: rgba(240,253,255,0.75);
  background: rgba(255,255,255,0.04);
}

.rpl-12__cta--ghost:hover {
  border-color: rgba(165,243,252,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
/* Floating badges */

.rpl-12__badge {
  position: absolute;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(165,243,252,0.15);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 0.72rem;
  color: rgba(165,243,252,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
  animation: rpl-12-float ease-in-out infinite alternate;
}

.rpl-12__badge--1 {
  top: 14%;
  left: 8%;
  animation-duration: 6s;
}

.rpl-12__badge--2 {
  top: 20%;
  right: 6%;
  animation-duration: 8s;
  animation-delay: -2s;
}

.rpl-12__badge--3 {
  bottom: 18%;
  left: 6%;
  animation-duration: 7s;
  animation-delay: -4s;
}

.rpl-12__badge--4 {
  bottom: 14%;
  right: 8%;
  animation-duration: 5s;
  animation-delay: -1s;
}

@keyframes rpl-12-float {
  to {
    transform: translateY(-10px);
  }
}

@media (max-width: 640px) {
  .rpl-12__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-12__blob,
    .rpl-12__arc,
    .rpl-12__star,
    .rpl-12__badge {
    animation: none !important;
  }

  .rpl-12__cta {
    transition: none;
  }
}
(function() {
  const stars = document.getElementById('rpl-12-stars');
  for (let i = 0; i < 80; i++) {
    const s = document.createElement('div');
    s.className = 'rpl-12__star';
    const size = Math.random() * 2.5 + 0.5;
    const delay = Math.random() * 4;
    const dur = Math.random() * 3 + 2;
    s.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      opacity:${Math.random()*0.8+0.1};
      animation-duration:${dur}s;
      animation-delay:${delay}s;
    `;
    stars.appendChild(s);
  }
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Ripple Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Aurora Borealis Ripple Background
Source: https://codefronts.com/motion/css-ripple-designs/css-aurora-borealis-ripple-background/

A night-sky hero with four drifting blur-filtered aurora blob layers (mix-blend-mode: screen), concentric ripple rings expanding from multiple anchor points in teal, indigo and cyan, 80 JS-seeded twinkling stars and floating editorial badges. Cormorant Garamond + Outfit on deep #020617 midnight.
## HTML
```html
<div class="rpl-12">
  <!-- Aurora blobs -->
  <div class="rpl-12__aurora">
    <div class="rpl-12__blob rpl-12__blob--a"></div>
    <div class="rpl-12__blob rpl-12__blob--b"></div>
    <div class="rpl-12__blob rpl-12__blob--c"></div>
    <div class="rpl-12__blob rpl-12__blob--d"></div>
  </div>

  <!-- Ripple rings -->
  <div class="rpl-12__ripple-field">
    <div class="rpl-12__arc rpl-12__arc--t1"></div>
    <div class="rpl-12__arc rpl-12__arc--t2"></div>
    <div class="rpl-12__arc rpl-12__arc--t3"></div>
    <div class="rpl-12__arc rpl-12__arc--t4"></div>
    <div class="rpl-12__arc rpl-12__arc--i1"></div>
    <div class="rpl-12__arc rpl-12__arc--i2"></div>
    <div class="rpl-12__arc rpl-12__arc--i3"></div>
    <div class="rpl-12__arc rpl-12__arc--c1"></div>
    <div class="rpl-12__arc rpl-12__arc--c2"></div>
  </div>

  <!-- Stars -->
  <div class="rpl-12__stars" id="rpl-12-stars"></div>

  <!-- Floating labels -->
  <div class="rpl-12__badge rpl-12__badge--1">Pure CSS</div>
  <div class="rpl-12__badge rpl-12__badge--2">No Canvas</div>
  <div class="rpl-12__badge rpl-12__badge--3">CSS Ripple</div>
  <div class="rpl-12__badge rpl-12__badge--4">Keyframes</div>

  <!-- Main content -->
  <div class="rpl-12__content">
    <div class="eyebrow">Aurora Ripple Effect</div>
    <h1>Where<br>light <em>ripples</em><br>endlessly.</h1>
    <p>Aurora blobs drift across a starfield while concentric rings expand outward — layered CSS gradients, blur filters and keyframe animations. Zero JavaScript for the background.</p>
    <div class="rpl-12__ctas">
      <a href="#" class="rpl-12__cta rpl-12__cta--primary">Explore Effect →</a>
      <a href="#" class="rpl-12__cta rpl-12__cta--ghost">View Source</a>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Outfit:wght@300;400;500&display=swap');

.rpl-12,
.rpl-12 *,
.rpl-12 *::before,
.rpl-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-12 ::selection {
  background: #a5f3fc;
  color: #020617;
}

.rpl-12 {
  font-family: 'Outfit', sans-serif;
  background: #020617;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
/* ─── Aurora layers: radial blobs that drift and pulse ─── */

.rpl-12__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Blob A — teal/green */

.rpl-12__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: rpl-12-drift ease-in-out infinite alternate;
}

.rpl-12__blob--a {
  width: 70vw;
  height: 50vh;
  top: -10%;
  left: -10%;
  background: radial-gradient(ellipse, rgba(52,211,153,0.4) 0%, rgba(16,185,129,0.2) 50%, transparent 100%);
  animation-duration: 12s;
}

.rpl-12__blob--b {
  width: 60vw;
  height: 60vh;
  top: 20%;
  right: -15%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.35) 0%, rgba(79,70,229,0.15) 50%, transparent 100%);
  animation-duration: 16s;
  animation-delay: -4s;
}

.rpl-12__blob--c {
  width: 55vw;
  height: 45vh;
  bottom: -10%;
  left: 20%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.3) 0%, rgba(14,165,233,0.15) 50%, transparent 100%);
  animation-duration: 10s;
  animation-delay: -7s;
}

.rpl-12__blob--d {
  width: 40vw;
  height: 35vh;
  top: 30%;
  left: 30%;
  background: radial-gradient(ellipse, rgba(167,243,208,0.25) 0%, rgba(52,211,153,0.1) 50%, transparent 100%);
  animation-duration: 20s;
  animation-delay: -10s;
}

@keyframes rpl-12-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(4%, 6%) scale(1.08);
  }

  66% {
    transform: translate(-3%, 4%) scale(0.95);
  }

  100% {
    transform: translate(6%, -4%) scale(1.05);
  }
}
/* ─── Ripple rings that expand from center ─── */

.rpl-12__ripple-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rpl-12-ring ease-out infinite;
}
/* Teal rings */

.rpl-12__arc--t1 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.6);
  animation-duration: 6s;
  animation-delay: 0s;
}

.rpl-12__arc--t2 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.35);
  animation-duration: 6s;
  animation-delay: 1.5s;
}

.rpl-12__arc--t3 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.18);
  animation-duration: 6s;
  animation-delay: 3.0s;
}

.rpl-12__arc--t4 {
  width: 100px;
  height: 100px;
  border-color: rgba(52,211,153,0.08);
  animation-duration: 6s;
  animation-delay: 4.5s;
}
/* Indigo rings */

.rpl-12__arc--i1 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.5);
  animation-duration: 8s;
  animation-delay: 2s;
}

.rpl-12__arc--i2 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.25);
  animation-duration: 8s;
  animation-delay: 4s;
}

.rpl-12__arc--i3 {
  width: 100px;
  height: 100px;
  border-color: rgba(129,140,248,0.12);
  animation-duration: 8s;
  animation-delay: 6s;
}
/* Cyan rings — slightly offset */

.rpl-12__arc--c1 {
  width: 100px;
  height: 100px;
  border-color: rgba(34,211,238,0.45);
  animation-duration: 9s;
  animation-delay: 1s;
  top: 40%;
  left: 55%;
}

.rpl-12__arc--c2 {
  width: 100px;
  height: 100px;
  border-color: rgba(34,211,238,0.22);
  animation-duration: 9s;
  animation-delay: 3.5s;
  top: 40%;
  left: 55%;
}

@keyframes rpl-12-ring {
  0% {
    transform: translate(-50%,-50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%,-50%) scale(14);
    opacity: 0;
  }
}
/* Stars */

.rpl-12__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rpl-12-twinkle ease-in-out infinite alternate;
}

@keyframes rpl-12-twinkle {
  to {
    opacity: 0.1;
    transform: scale(0.6);
  }
}
/* Content */

.rpl-12__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
}

.rpl-12__content .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(165,243,252,0.6);
  margin-bottom: 20px;
  border: 1px solid rgba(165,243,252,0.2);
  border-radius: 40px;
  padding: 6px 16px;
}

.rpl-12__content h1 {
  font-family: 'Cormorant Garamond';
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 300;
  line-height: 0.9;
  color: #f0fdff;
  letter-spacing: -0.01em;
}

.rpl-12__content h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #5eead4, #22d3ee, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rpl-12__content p {
  margin-top: 24px;
  font-size: 1rem;
  color: rgba(240,253,255,0.5);
  line-height: 1.7;
  font-weight: 300;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.rpl-12__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.rpl-12__cta {
  padding: 14px 30px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}

.rpl-12__cta--primary {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff;
  box-shadow: 0 8px 32px rgba(99,102,241,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.rpl-12__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(99,102,241,0.5);
}

.rpl-12__cta--ghost {
  border: 1px solid rgba(165,243,252,0.25);
  color: rgba(240,253,255,0.75);
  background: rgba(255,255,255,0.04);
}

.rpl-12__cta--ghost:hover {
  border-color: rgba(165,243,252,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
/* Floating badges */

.rpl-12__badge {
  position: absolute;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(165,243,252,0.15);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 0.72rem;
  color: rgba(165,243,252,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
  animation: rpl-12-float ease-in-out infinite alternate;
}

.rpl-12__badge--1 {
  top: 14%;
  left: 8%;
  animation-duration: 6s;
}

.rpl-12__badge--2 {
  top: 20%;
  right: 6%;
  animation-duration: 8s;
  animation-delay: -2s;
}

.rpl-12__badge--3 {
  bottom: 18%;
  left: 6%;
  animation-duration: 7s;
  animation-delay: -4s;
}

.rpl-12__badge--4 {
  bottom: 14%;
  right: 8%;
  animation-duration: 5s;
  animation-delay: -1s;
}

@keyframes rpl-12-float {
  to {
    transform: translateY(-10px);
  }
}

@media (max-width: 640px) {
  .rpl-12__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-12__blob,
    .rpl-12__arc,
    .rpl-12__star,
    .rpl-12__badge {
    animation: none !important;
  }

  .rpl-12__cta {
    transition: none;
  }
}
```

## JavaScript
```js
(function() {
  const stars = document.getElementById('rpl-12-stars');
  for (let i = 0; i < 80; i++) {
    const s = document.createElement('div');
    s.className = 'rpl-12__star';
    const size = Math.random() * 2.5 + 0.5;
    const delay = Math.random() * 4;
    const dur = Math.random() * 3 + 2;
    s.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      opacity:${Math.random()*0.8+0.1};
      animation-duration:${dur}s;
      animation-delay:${delay}s;
    `;
    stars.appendChild(s);
  }
})();
```

Techniques used in this demo

mix-blend-modeMDN ↗background-clip: textMDN ↗filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →