Gradients

Extended Module

24 gradient and surface effects — backgrounds, text fills, animated patterns, and atmospheric blends. Uses @property for smooth color interpolation. All live, all running.

gleam-gradients.css 24 effects @property typed colors fully customizable

<!-- Animated background (no .gleam needed) -->
<div class="gradient-animate">...</div>

<!-- Gradient text -->
<h1 class="text-gradient-animate">Vivid heading</h1>

<!-- Customize colors via CSS properties -->
.my-card {
  --gradient-from: #f472b6;
  --gradient-to:   #a78bfa;
  --gradient-angle: 135deg;
}

Static Backgrounds

gradient-linear

gradient-radial

gradient-conic

gradient-glass

Animated Backgrounds — all running live

gradient-animate

Shifting 4-stop blend

gradient-flow

Sliding linear loop

gradient-mesh

4-corner radial blend

gradient-shine

Sliding glint sweep

gradient-pulse

Breathing radial

gradient-spotlight

Moving focal point

gradient-rainbow

Full spectrum flow

gradient-neon

Glowing neon slide

Atmospheric

gradient-aurora

gradient-plasma

gradient-cosmic

gradient-fire

gradient-ocean

Text Gradients

text-gradient-animate

Shifting color headline

text-gradient-flow

Flowing gradient text

text-gradient-shine

Shimmer on text

text-gradient-rainbow

Full spectrum text

text-gradient-mesh

Mesh blend text

CSS Variable Reference

gleam-gradients.css registers --gradient-from, --gradient-to, and --gradient-angle via @property for typed color interpolation. These are shared with gleam-hover.css, gleam-borders.css, and gleam-text.css.

/* Per-element color overrides */
.hero-gradient {
  --gradient-from: #f472b6;
  --gradient-to:   #a78bfa;
  --gradient-mid:  #60a5fa;
  --gradient-accent: #34d399;
  --gradient-angle: 135deg;
}

/* Speed control */
.fast-flow {
  --gradient-speed: 1.5s;
}

/* Load order matters! */
/* gleam-gradients.css before gleam-hover.css,
   gleam-ambient.css, gleam-borders.css, gleam-text.css
   for typed color transitions */