Ambient Background Effects

About Ambient Effects

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

Rotating Glow Effect

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

Rotate Dual

Two overlapping gradients rotating in opposite directions

Dual Rotation Effect

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

Rotate Spotlight

Off-center rotating light beam effect

Spotlight Effect

<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

Floating Blobs

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

Float Orbs

Multiple floating semi-transparent orbs

Floating Orbs

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

Float Particles

Tiny dots drifting upward like dust motes

Floating Particles

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

Wave & Ripple Effects

Flowing patterns and expanding ripples for dynamic backgrounds

Wave

Subtle sine wave undulation across the background

Wave Effect

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

Ripple

Concentric rings expanding outward from center

Ripple Effect

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

Aurora

Northern lights style flowing colours

Aurora Effect

<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

Slow (45s)

.bg-ambient-slow

Normal (30s)

.bg-ambient-normal

Fast (15s)

.bg-ambient-fast

<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

Subtle

.bg-ambient-subtle

Intense

.bg-ambient-intense

<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

Fast + Intense Aurora

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

Usage Guide

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

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