Ambient Background Effects

Subtle CSS animations that add visual interest and depth to backgrounds without distracting from content

Section

Ambient background effects use CSS animations and pseudo-elements to create subtle, continuous motion in your backgrounds. All effects are GPU-accelerated for smooth 60fps performance and automatically layer content on top using z-index positioning.

Performance Note: All ambient effects use will-change: transform and only animate transform and opacity properties for optimal GPU acceleration.

rotating-gradients

Gentle rotating radial and linear gradients that create a sense of subtle motion

Rotate Glow

A single radial gradient rotating slowly

Rotate Glow

Rotating Glow Effect

<span>Rotating Glow Effect</span>

<div class="bg-ambient-rotate-glow">
  <h1>Your Content Here</h1>
</div>

Rotate Dual

Two overlapping gradients rotating in opposite directions

Rotate Dual

Dual Rotation Effect

<span>Dual Rotation Effect</span>

<div class="bg-ambient-rotate-dual">
  <h1>Your Content Here</h1>
</div>

Rotate Spotlight

Off-center rotating light beam effect

Rotate Spotlight

Spotlight Effect

<span>Spotlight Effect</span>

<div class="bg-ambient-rotate-spotlight">
  <h1>Your Content Here</h1>
</div>

floating-shapes

Soft gradient shapes that drift and morph across the background

Float Blobs

Morphing gradient circles that drift around

Float Blobs

Floating Blobs

<span>Floating Blobs</span>

<div class="bg-ambient-float-blobs">
  <h1>Your Content Here</h1>
</div>

Float Orbs

Multiple floating semi-transparent orbs

Float Orbs

Floating Orbs

<span>Floating Orbs</span>

<div class="bg-ambient-float-orbs">
  <h1>Your Content Here</h1>
</div>

Float Particles

Tiny dots drifting upward like dust motes

Float Particles

Floating Particles

<span>Floating Particles</span>

<div class="bg-ambient-float-particles">
  <h1>Your Content Here</h1>
</div>

wave-ripple

Flowing patterns and expanding ripples for dynamic backgrounds

Wave

Subtle sine wave undulation across the background

Wave

Wave Effect

<span>Wave Effect</span>

<div class="bg-ambient-wave">
  <h1>Your Content Here</h1>
</div>

Ripple

Concentric rings expanding outward from center

Ripple

Ripple Effect

<span>Ripple Effect</span>

<div class="bg-ambient-ripple">
  <h1>Your Content Here</h1>
</div>

Aurora

Northern lights style flowing colours

Aurora

Aurora Effect

<span>Aurora Effect</span>

<div class="bg-ambient-aurora">
  <h1>Your Content Here</h1>
</div>

modifiers

Adjust speed and intensity of ambient effects to suit your design

Speed Modifiers

Control animation speed with modifier classes

Speed Modifiers

Slow (45s)

.bg-ambient-slow

Normal (30s)

.bg-ambient-normal

Fast (15s)

.bg-ambient-fast

<div class="col-lg-4">
    <div class="modifier-demo bg-ambient-rotate-glow bg-ambient-slow">
        <span>Slow (45s)</span>
    </div>
    <code class="d-block text-center mt-2">.bg-ambient-slow</code>
</div>
<div class="col-lg-4">
    <div class="modifier-demo bg-ambient-rotate-glow bg-ambient-normal">
        <span>Normal (30s)</span>
    </div>
    <code class="d-block text-center mt-2">.bg-ambient-normal</code>
</div>
<div class="col-lg-4">
    <div class="modifier-demo bg-ambient-rotate-glow bg-ambient-fast">
        <span>Fast (15s)</span>
    </div>
    <code class="d-block text-center mt-2">.bg-ambient-fast</code>
</div>

<div class="bg-ambient-rotate-glow bg-ambient-slow">Slow</div>
<div class="bg-ambient-rotate-glow bg-ambient-normal">Normal</div>
<div class="bg-ambient-rotate-glow bg-ambient-fast">Fast</div>

Intensity Modifiers

Control effect opacity for subtle or intense effects

Intensity Modifiers

Subtle

.bg-ambient-subtle

Intense

.bg-ambient-intense

<div class="col-lg-6">
    <div class="modifier-demo bg-ambient-rotate-dual bg-ambient-subtle">
        <span>Subtle</span>
    </div>
    <code class="d-block text-center mt-2">.bg-ambient-subtle</code>
</div>
<div class="col-lg-6">
    <div class="modifier-demo bg-ambient-rotate-dual bg-ambient-intense">
        <span>Intense</span>
    </div>
    <code class="d-block text-center mt-2">.bg-ambient-intense</code>
</div>

<div class="bg-ambient-aurora bg-ambient-subtle">Subtle</div>
<div class="bg-ambient-aurora bg-ambient-intense">Intense</div>

Combining Modifiers

Speed and intensity modifiers can be combined

Combining Modifiers

Fast + Intense Aurora

<span>Fast + Intense Aurora</span>

<div class="bg-ambient-aurora bg-ambient-fast bg-ambient-intense">
  <h1>Your Content Here</h1>
</div>

usage

How It Works

All effects use ::before or ::after pseudo-elements
Content automatically sits on top via z-index: 1
Parent element must have position: relative (automatically applied)
Parent element gets overflow: hidden to contain effects

Best Practices

Use subtle effects for content-heavy sections
Increase intensity for hero sections and CTAs
Combine with dark backgrounds for best visibility
Test on mobile devices for performance

<div class="col-lg-6 mb-4">
    <h3 class="h5">How It Works</h3>
    <ul class="mb-3">
        <li>All effects use <code>::before</code> or <code>::after</code> pseudo-elements</li>
        <li>Content automatically sits on top via <code>z-index: 1</code></li>
        <li>Parent element must have <code>position: relative</code> (automatically applied)</li>
        <li>Parent element gets <code>overflow: hidden</code> to contain effects</li>
    </ul>
</div>
<div class="col-lg-6 mb-4">
    <h3 class="h5">Best Practices</h3>
    <ul class="mb-3">
        <li>Use subtle effects for content-heavy sections</li>
        <li>Increase intensity for hero sections and CTAs</li>
        <li>Combine with dark backgrounds for best visibility</li>
        <li>Test on mobile devices for performance</li>
    </ul>
</div>

Accessibility: Ambient effects are purely decorative. Ensure sufficient colour contrast between text and background regardless of the effect applied.