Modern CSS Gradient Effects

Animated, mesh, conic and text gradients built from the theme colours.

1Aurora Hover

Northern-lights colour clouds that drift inside a card and brighten when it is hovered. Class: fx-aurora-hover

Tax receipts

Ninety cents of every dollar goes directly to the projects you support.

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="card fx-aurora-hover" style="width:15rem">
    <div class="card-body">
      <h3 class="h6 fw-bold mb-1">Tax receipts</h3>
      <p class="small text-body-secondary mb-2">Ninety cents of every dollar goes directly to the projects you support.</p>
      <a href="#" class="btn btn-primary btn-sm">Details</a> 
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-aurora-hover { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora-hover::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .35;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(var(--wt-primary-rgb), .9), transparent),
    radial-gradient(closest-side at 70% 30%, rgba(var(--wt-accent-rgb), .8), transparent),
    radial-gradient(closest-side at 55% 70%, rgba(var(--wt-secondary-rgb), .8), transparent);
  filter: blur(24px);
  transition: opacity .6s ease;
  animation: fx-aurora-hover-drift 12s ease-in-out infinite alternate;
}
.fx-aurora-hover:hover::before, .fx-aurora-hover:focus-within::before { opacity: .85; }
@keyframes fx-aurora-hover-drift {
  from { transform: translate(-6%, -4%) rotate(0deg); }
  to { transform: translate(6%, 5%) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-aurora-hover, .fx-aurora-hover::before, .fx-aurora-hover::after, .fx-aurora-hover *, .fx-aurora-hover *::before, .fx-aurora-hover *::after { animation: none !important; transition: none !important; }
}

2Moving Stripes

Animated diagonal stripes for progress bars, sale banners and "in progress" states. Class: fx-moving-stripes

Summer sale

83%

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="w-100" style="max-width:18rem">
    <div class="fx-moving-stripes rounded-3 p-3 text-center fw-bold mb-3">
      Summer sale
    </div>
    <div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar fx-moving-stripes" style="width:83%">
        83%
      </div>
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-moving-stripes {
  background-color: var(--wt-primary);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 12px, transparent 12px 24px);
  background-size: 34px 34px;
  color: var(--wt-on-primary, #fff);
  animation: fx-moving-stripes-move 1s linear infinite;
}
@keyframes fx-moving-stripes-move { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-moving-stripes, .fx-moving-stripes::before, .fx-moving-stripes::after, .fx-moving-stripes *, .fx-moving-stripes *::before, .fx-moving-stripes *::after { animation: none !important; transition: none !important; }
}

3Text Mask

Large text that works as a window onto a moving gradient - or onto an image set with an inline background-image. Class: fx-text-mask

WILD

Discover

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="text-center">
    <div class="display-3 fw-bold lh-1 fx-text-mask">
      WILD
    </div>
    <div class="display-5 fw-bold lh-1 fx-text-mask" style="--fx-mask-img:initial;background-image:url(https://images.unsplash.com/photo-1758599668178-d9716bbda9d5?auto=format&fit=crop&w=1200&h=800&q=70)">
      Discover
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-text-mask {
  color: var(--wt-primary-ink);
  background-image: var(--fx-mask-img, linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-accent) 30%, var(--wt-secondary) 60%, var(--wt-primary) 100%));
  background-size: cover; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-text-mask-pan 10s ease-in-out infinite alternate;
}
.fx-text-mask:not([style*="--fx-mask-img"]) { background-size: 300% 300%; }
@keyframes fx-text-mask-pan { to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-text-mask, .fx-text-mask::before, .fx-text-mask::after, .fx-text-mask *, .fx-text-mask *::before, .fx-text-mask *::after { animation: none !important; transition: none !important; }
}