Emotion Gradient Backgrounds is a WebGL experiment that translates fifteen human emotional states — from serenity to chaos — into living color fields using Oklab perceptual color space. Built in ESQUE Labs, each gradient is driven by a custom GLSL shader with unique motion, palette, and rhythm. This article documents the design logic behind every mood.
The Default Gradient
Pull up ten homepages from the last six months. Any sector, any budget. Nine of them have the same background: a cyan bleeding into purple, bleeding into pink. A soft blur. A subtle animation. The effect is pleasant and instantly forgettable. We call it the default AI gradient—not because AI made it (most of these were built by human designers) but because it is what an AI would make. A color choice that offends nothing and speaks of nothing.
The default gradient is a symptom of a larger problem: the outsourcing of mood to tools that have no opinion about it. Figma ships gradient presets. CSS generators offer sliders. AI image tools produce backgrounds from prompts like “soft abstract gradient, modern feel.” The results are technically competent and emotionally vacant. They fill space without occupying it.
A well-tuned background is something you feel, not something you see.
Every designed surface has a mood, whether the designer chose it or not. When the mood is chosen deliberately, the surface does emotional work. When it is not, the surface falls to the default—and the default is always generic.
The Premise
This experiment asks a narrow question: can a single fragment shader, fed different parameters, produce fifteen emotionally distinct backgrounds? Not fifteen color schemes. Fifteen feelings. Serene and calm are both quiet, but serene has the slow horizontal drift of fog over water, while calm has the imperceptible rhythm of breath. Anxious and electric are both high-energy, but anxious jitters in discrete jumps while electric pulses in smooth, confident strokes.
The hypothesis is that emotion in a gradient is not primarily about hue. It is about three things working together: palette shape (how many hues, how far apart, how saturated), motion signature (speed, direction, turbulence), and compositional geometry (where the light sits, how it moves through space). Change any one of these and the feeling shifts.
The Color Space
Every palette in this experiment is defined in OKLCH—a perceptually uniform cylindrical color space published by Björn Ottosson in 2020. In OKLCH, a ten-unit step in lightness looks like a ten-unit step, regardless of hue. This is not true in HSL, where equal numeric changes produce wildly unequal visual differences. A gradient that transitions smoothly in HSL can lurch through perceived brightness in a way that feels wrong without being obviously broken.
a = C · cos(H)
b = C · sin(H)
// Each mood: 5 control points × 3 channels (L, C, H)
// Interpolated via smoothstep in the shader
The shader receives five OKLCH control points per mood, converted to OKLab (the Cartesian form) before being passed as uniforms. Interpolation happens inside the fragment shader using smoothstep blending between adjacent stops. The result is a gradient that moves through perceptually even transitions—no hot spots, no dead zones, no hue shifts that the math says should not be there.
The Shader
One fragment shader drives all fifteen moods. The architecture is simple: a five-octave FBM noise field (fractional Brownian motion) generates the spatial composition, and a mood-specific composition function shapes how that noise maps to the palette.
The composition function is where the emotional tuning lives. Each mood has its own function that determines how UV coordinates and time map to a palette index. Serene uses a slow vertical drift weighted toward the top of the frame. Euphoric uses three orbiting bloom centers that overlap and interfere. Anxious quantizes time into discrete steps, creating a jittery displacement that never settles. Each function is short—five to ten lines—but encodes a specific relationship between space, time, and color.
The composition function is the emotional argument. Everything else is plumbing.
Three uniforms control the global character: intensity (how far the composition deviates from a flat midpoint), speed (the time multiplier), and grain (the amplitude of per-pixel film noise). These are tuned per mood. Peace runs at speed 0.7 with intensity 0.50. Electric runs at 1.4 with intensity 0.95. The difference is immediately visible—and more importantly, immediately felt.
The Fifteen
The moods are arranged not alphabetically but along an emotional arc, from stillness to intensity and back:
Calm — breath rhythm, barely perceptible swell
Peace — diagonal stillness, green undertone
Tender — warm center bloom, peach and rose
Love — breathing radial pulse, deep warmth
Joy — upward flow, amber sparkle
Faith — vertical light shafts, gold through indigo
Reverent — cathedral light, slow warp, deep purple to gold
Humility — settling downward, muted earth tones
Patience — glacial horizontal drift, warm grey
Focused — vertical wave, cool blue, minimal noise
Melancholy — inverted gravity, purple weight from above
Anxious — quantized jitter, chromatic interference
Euphoric — orbiting blooms, saturated collision
Electric — stepped quantization, pulsing neon
Each mood has ancestors. Serene descends from Hiroshi Sugimoto’s seascape photographs—that featureless horizon where water and sky merge into a single luminous field. Tender borrows from Fragonard’s pastels, the soft pink light of rococo interiors. Reverent takes its vertical light shafts from Byzantine mosaic, gold tesserae catching candlelight in a dark nave. Anxious draws from the visual texture of wet asphalt under cellular-tower light—the uneasy green-purple cast of urban infrastructure at night.
The Transition
When you switch between moods, the shader does not cut. It crossfades. The previous mood’s composition function continues to run alongside the new one, and a smoothstep mix interpolates between their outputs over two seconds. This means the transition itself becomes a third mood—a hybrid state where two emotional signatures coexist and interfere.
The crossfade is not cosmetic. It demonstrates something important about emotional color: moods are not discrete states. They bleed into each other. The two-second transition is long enough to feel the overlap—the moment where serene is not yet calm, where the old feeling has not released and the new one has not arrived. That liminal space is where most real emotional experience lives.
The Argument
Color is the most powerful and least examined tool in the designer’s inventory. We spend weeks choosing typefaces and months refining copy. We spend minutes choosing background colors, and most of that time is spent matching a brand palette rather than asking what the color does to the person seeing it.
These fifteen gradients are an attempt at taking color seriously—treating it not as decoration but as a carrier of emotional information. The shader is deliberately simple. No texture maps, no 3D geometry, no post-processing. Just noise, color, and time. The constraint forces the emotional work onto the only variable that matters: how the color moves.
Constraint is not the enemy of feeling. It is the lens that focuses it.
The experiment proves nothing in the scientific sense. It does not claim that these fifteen palettes will universally evoke their named emotions. Color perception is shaped by culture, context, and individual neurology. But it does demonstrate that a small set of parameters—five color stops, a speed value, an intensity curve, a composition function—can produce backgrounds that feel meaningfully different from each other. Not just different hues. Different moods. Different temperatures. Different speeds of thought.
That is enough. If a background can carry mood, then every background does carry mood—including the ones where no one chose it. The default gradient is not neutral. It is the mood of not caring. These fifteen are an argument for caring.
ESQUE is a strategy, branding, and design studio based in Chattanooga, TN. Explore more experiments at ESQUE Labs, or start a conversation about your next project.