ChromaFlow CSS Gradients

Paint entire surfaces with animated CSS gradients.

Pick a theme, motion pattern, and static frame. Mix hover states, transforms, or inject your own keyframes. Everything is powered by data attributes so you can drop ChromaFlow anywhere.

Data Attributes Tailwind UI Motion Patterns Custom Keyframes

Featured Background

Fluid hero surface

Mode: Auto Motion: Default Transform: None

ChromaFlow

A Cool Animated CSS Gradient Demo

Installs anywhere with a single data attribute

Color Library

All palettes are here.

Pick from 36 predefined gradients spanning neon, organic, monochrome and soft pastel palettes. Each tile below is powered only by data-chroma-flow.

Happiness

happiness

Pastel Warm

pastel-warm

Pastel Cool

pastel-cool

Dark

dark

Vibrant

vibrant

Sunset

sunset

Ocean

ocean

Forest

forest

Aurora

aurora

Fire

fire

Monochrome

monochrome

Lavender

lavender

Mint

mint

Coral

coral

Midnight

midnight

Rose

rose

Cyber

cyber

Berry

berry

Sky

sky

Spring

spring

Blossom

blossom

Dream

dream

Rainbow

rainbow

Sand

sand

Cloud

cloud

Wedding

wedding

Sunshine

sunshine

Peach

peach

Cotton

cotton

Aqua

aqua

Lilac

lilac

Cream

cream

Baby

baby

Sherbet

sherbet

Ice

ice

Bubblegum

bubblegum

Modes & Frames

Stateful behavior baked in

Hover, stop, or lock any percent frame.

Hover Preview

chroma-mode="hover"

Stop Frame 50%

chroma-mode="stop"

Hover Pause

chroma-mode="unhover"

Transforms & Motion Patterns

Rotate, mirror, or swap movement

Combining transforms with different motion profiles is effortless.

Rotate 90°

motion="orbit"

Mirror X

motion="wave"

Rotate 270°

motion="drift"

Flip XY

motion="pulse"

Data Attributes & CSS Variables

Everything is consistent and overridable.

Attribute CSS Variable Values
data-chroma-flow --chroma-color-* pastel, cyber, aurora, berry, ...
data-chroma-blur --chroma-blur none, sm, md, lg, xl
data-chroma-rounded --chroma-rounded sm, md, lg, xl, full
data-chroma-speed --chroma-speed slow, normal, fast, ultra
data-chroma-mode --chroma-mode auto, hover, unhover, stop
data-chroma-transform --chroma-transform rotate-90/180/270, flip-x/y/xy
data-chroma-motion --chroma-motion default, drift, pulse, orbit, wave
data-chroma-frame --chroma-frame 0-100 (integer percent for stop/hover)

ℹ️ data-chroma-frame locks a precise frame in hover or stop modes. data-chroma-motion picks a motion pattern, but you can also push your own frames via JavaScript.

JavaScript API

Override or add new motion patterns.

Pass custom keyframes per instance or register them globally. 

import ChromaFlow from './ChromaFlow.js';

// Register a global pattern (available to data-chroma-motion="zigzag")
ChromaFlow.registerMotionPattern('zigzag', [
  { layer1: { x: 10, y: 10, sizeX: 100, sizeY: 80 }, layer2: { x: 30, y: 30, sizeX: 180, sizeY: 150 }, layer3: { x: 60, y: 50, sizeX: 240, sizeY: 200 }, layer4: { x: 80, y: 60, sizeX: 300, sizeY: 240 } },
  { layer1: { x: 80, y: 20, sizeX: 120, sizeY: 90 }, layer2: { x: 60, y: 40, sizeX: 200, sizeY: 160 }, layer3: { x: 30, y: 60, sizeX: 250, sizeY: 210 }, layer4: { x: 5,  y: 80, sizeX: 320, sizeY: 250 } },
]);

const element = document.querySelector('[data-chroma-flow=\"sunset\"]');

new ChromaFlow(element, {
  motionPattern: 'zigzag',
  keyframes: [
    { layer1: { x: 0, y: 0, sizeX: 90, sizeY: 90 }, layer2: { x: 25, y: 25, sizeX: 160, sizeY: 130 }, layer3: { x: 60, y: 40, sizeX: 240, sizeY: 190 }, layer4: { x: 85, y: 55, sizeX: 310, sizeY: 240 } },
    { layer1: { x: 100, y: 100, sizeX: 90, sizeY: 90 }, layer2: { x: 75, y: 75, sizeX: 160, sizeY: 130 }, layer3: { x: 40, y: 60, sizeX: 240, sizeY: 190 }, layer4: { x: 15, y: 45, sizeX: 310, sizeY: 240 } },
  ]
});