GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

CSS Sunset Gradient: 9 Demos With a Living Sky

· Godrich · 9 items · 27 min read

Creative UIVanilla JSSCSSAutoplayHero sectionContent pipeline

A css sunset gradient from two blended colors keeps the sky unchanged as the sun sinks, gives the sea no road of light and leaves cloud undersides dark —

One sun-height number redraws every scene on this page, and the nine below are the ones worth copying into a hero, a loading screen or a time-of-day control.

See All Nine Sunset Scenes Running on This Page

A Sunset Backdrop Whose Sky Color Follows the Sun Height01 ss-altitude-sky-ramp A Scattering Sky Painted Row by Row by Light Path Length02 ss-path-length-scatter-rows A Sun That Flattens and Reddens as It Meets the Horizon03 ss-horizon-flatten-sun A Sea Glitter Path Running Down From the Sun04 ss-sea-glitter-path Cloud Bands Whose Undersides Redden First as the Sun Drops05 ss-cloud-underlight-bands Layered Ridges That Melt Into the Sky Color With Distance06 ss-ridge-aerial-haze Stars That Appear One by One as the Sky Darkens07 ss-dusk-star-emergence A Sunset Time Scrubber You Drag the Sun Through08 ss-drag-sun-time-scrub A Pure CSS Sunset Gradient Moving Its Stops Through Registered Properties09 ss-property-gradient-stops-loop

Auto-plays · click a tile to jump to its section · all nine in one zip

CSS Sunset Gradient: 9 Demos Where Sun Height, Light Path and Reflection Are Computed

Scenes 01 to 08 share one body: a 480 by 300 canvas, a status line, one button and four helpers, ramp (reads a color band), skyAt (paints one sky point), seaBase (lays the water) and glow (soft light). The only part that differs from scene to scene is scene.draw, while 09 is plain CSS with no <script> tag.

The single input is the sun height alt. At 0 the sun rests on the horizon, at 1 it floats high and negative values sit below the line; the screen y is 186 − alt × 150, so alt 0.5 lands at 111, 0.2 at 156 and −0.12 at 204. Scenes 01 to 07 run on their own with PERIOD_MS 4400 as one cycle, sinking from from to to in 2.2 seconds and climbing back in another 2.2, while 08 sweeps on AUTO_MS 7600.

Two blended colors cannot make a sunset because the colors have no idea where the sun is. Here each sky row is a function of the sun height and the row position, and the sea, clouds and stars read the same alt, so what you gain over a sunset css snippet of two gradient stops is one input that picks a different color band for every layer.

getImageData appears in none of the nine files, and the only place pixels are written by hand is 05, through createImageData and putImageData. Scenes 01 to 08 hold requestAnimationFrame, matchMedia and pointermove, while 09 relies on a CSS media query alone. Star and cloud positions come from mulberry32 with a fixed seed (448 in 07, 808 in 08), so reloading seats everything in the same spots.

Code for Each Sunset Technique in a CSS Sunset Beach Scene

Each snippet below is a run of consecutive lines cut from one file, one or two per scene. The sky colors for a css sunset beach backdrop come from three arrays in 01, ZENITH_RAMP, HORIZON_RAMP and SUN_RAMP, so start there if you only want to recolor the sky. The full files sit in the zip further down.

01A Sunset Backdrop Whose Sky Color Follows the Sun Height

skyAt computes v = row ÷ 186 for every row and blends a zenith color and a horizon color, both picked from color bands by the sun height, with v raised to SKY_BLEND 1.7. As the sun descends both picks slide along their bands together, so the whole sky warms at once and the scene suits a sunset hero background. The render logged 74.2% cumulative area and 23/23 moved frames.

A Sunset Backdrop Whose Sky Color Follows the Sun Height
Open in a new tab

01 · A Sunset Backdrop Whose Sky Color Follows the Sun Height — Measured area 74.222% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

SUN_ALTZENITH_RAMPHORIZON_RAMPSKY_BLEND
    function ramp(stops, a) {
        if (a <= stops[0][0]) {
            return stops[0][1];
        }
        for (let i = 1; i < stops.length; i += 1) {
            if (a <= stops[i][0]) {
                const p = stops[i - 1];
                const q = stops[i];
                return mix(p[1], q[1], (a - p[0]) / (q[0] - p[0]));
            }
        }
        return stops[stops.length - 1][1];
    }
    // Color of one sky point; v runs from 0 (zenith) to 1 (horizon)
    function skyAt(alt, v) {
        return mix(ramp(ZENITH_RAMP, alt), ramp(HORIZON_RAMP, alt), Math.pow(clamp(v, 0, 1), SKY_BLEND));
    }

    const scene = {
        from: SUN_ALT,
        to: -0.12,
        hi: 1,
        lo: ALT_NIGHT,
        draw: function (ctx, alt, t) {
            skyRows(ctx, alt, 0, HORIZON, SKY_ROW);
            const sc = ramp(SUN_RAMP, alt);
            ctx.save();
            ctx.beginPath();
            ctx.rect(0, 0, W, HORIZON);
            ctx.clip();
            sunDisc(ctx, SUN_X, sunY(alt), SUN_R, SUN_R, sc, 96);
            ctx.restore();
            seaBase(ctx, alt, t);
            ctx.save();
            ctx.translate(SUN_X, HORIZON + 40);
            ctx.scale(1, 2.2);
            glow(ctx, 0, 0, 48, sc, 0.3 * smooth((alt + 0.1) / 0.3));
            ctx.restore();
            swatches(ctx, alt);
        }
    };

02A Scattering Sky Painted Row by Row by Light Path Length

rowColor finds the scatter amount for each row from the line-of-sight length 1 ÷ (el + 0.1), then trims blue first by the length the sunlight traveled, so a low sun leaves red in the row color. That path length climbs from 0.91 at the zenith to 10 at the horizon, which packs the color change into eye heights of 0.1 and below and fits anyone generating a sunset sky backdrop from one formula. This scene reached 73.9% cumulative area and 23/23 moved frames.

A Scattering Sky Painted Row by Row by Light Path Length
Open in a new tab

02 · A Scattering Sky Painted Row by Row by Light Path Length — Measured area 73.88% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

AIR_DENSITYPATH_GAINRED_KEEPROW_STEP
    // Color of one row; el is the eye height of that row (1 = zenith, 0 = horizon). The lower it is, the longer the path through air
    function rowColor(alt, el) {
        const sunPath = 1 / (0.9 * Math.max(alt, 0) + 0.1);
        const loss = [0.05 * (1 - RED_KEEP), 0.24, 0.42];
        const day = smooth((alt + 0.16) / 0.34);
        const rowPath = 1 / (el + 0.1);
        const out = [0, 0, 0];
        for (let c = 0; c < 3; c += 1) {
            const direct = Math.exp(-loss[c] * PATH_GAIN * sunPath * 4);
            const seen = 1 - Math.exp(-SCATTER[c] * AIR_DENSITY * rowPath * 0.18);
            const rad = direct * seen * (0.1 + 0.9 * day) + NIGHT_FLOOR[c] * (1 - day);
            out[c] = 255 * (0.2 + 0.8 * (1 - Math.exp(-EXPOSURE * rad)));
        }
        return out;
    }

03A Sun That Flattens and Reddens as It Meets the Horizon

The vertical radius of the disc shrinks by FLATTEN_MAX 0.34, the horizontal radius widens by a plain 0.28 factor in the code, and the color slides from pale yellow to coral, all three following the single value low. At alt 0, low is 1, which gives a flat sun with radii 13.2 vertical and 25.6 horizontal, and the disc is then mirrored about the horizon and rippled onto the sea. Its numbers: 75.4% cumulative area and 23/23 moved frames.

A Sun That Flattens and Reddens as It Meets the Horizon
Open in a new tab

03 · A Sun That Flattens and Reddens as It Meets the Horizon — Measured area 75.381% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

FLATTEN_MAXSUN_RADIUSHALO_SPREADREDDEN_AT
            // Rises from 0 to 1 as the sun sinks; flatness, redness and halo all follow this one value
            const low = 1 - smooth(alt / REDDEN_AT);
            const ry = SUN_RADIUS * (1 - FLATTEN_MAX * low);
            const rx = SUN_RADIUS * (1 + 0.28 * low);
            const col = mix([255, 246, 220], [255, 128, 112], low);
            const sy = sunY(alt);
            const halo = SUN_RADIUS * (2.2 + HALO_SPREAD * low);
            ctx.save();
            ctx.beginPath();
            ctx.rect(0, 0, W, HORIZON);
            ctx.clip();
            glow(ctx, SUN_X, HORIZON, 170, col, 0.34 * low);
            sunDisc(ctx, SUN_X, sy, rx, ry, col, halo);
            ctx.restore();

            // The sun on the sea: the disc flipped about the horizon, cut per row and shifted by the ripple
            const yr = 2 * HORIZON - sy;
            for (let y = HORIZON + 1; y < H; y += 2) {
                const dist = (y - yr) / ry;
                if (Math.abs(dist) < 1) {
                    const hw = rx * Math.sqrt(1 - dist * dist);
                    const shift = 5 * (0.3 + 0.7 * (y - HORIZON) / 60) * Math.sin(y * 0.5 + t * 0.003);
                    ctx.fillStyle = css(col, 0.62 * (1 - 0.5 * Math.min(1, (y - HORIZON) / 90)));
                    ctx.fillRect(SUN_X - hw + shift, y, hw * 2, 2);
                }
            }

04A Sea Glitter Path Running Down From the Sun

glitterRoad cuts the sea into 57 rows of 2 px, finds each row's wave-shifted center, and turns nine pieces around it on and off with vnoise, which leaves a broken road of light under the sun. The half-width grows from 7.7 px at the horizon toward about 31.7 px on the last row, so perspective comes for free and the scene drops straight into a seascape backdrop. It covered 74.9% cumulative area with 23/23 moved frames.

A Sea Glitter Path Running Down From the Sun
Open in a new tab

04 · A Sea Glitter Path Running Down From the Sun — Measured area 74.935% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

WAVE_AMPGLITTER_WIDTHROW_JITTERSUN_X
    // Sea glitter road: find each water row's wave-shifted position and light only the pieces within the width under the sun
    function glitterRoad(ctx, alt, cx0, t, col) {
        const vis = smooth((alt + 0.08) / 0.22);
        if (vis <= 0.01) {
            return;
        }
        const lit = mix(col, [255, 255, 255], 0.4);
        for (let y = HORIZON + 1; y < H; y += 2) {
            const d = (y - HORIZON) / (H - HORIZON);
            const jit = ROW_JITTER * (hash2(y, 11) - 0.5) * 2;
            const shift = WAVE_AMP * (0.18 + 0.82 * d) * (Math.sin(y * 0.31 + t * 0.0021) + 0.6 * Math.sin(y * 0.77 - t * 0.0033 + jit * 3) + jit * 0.5);
            const half = GLITTER_WIDTH * (0.35 + 1.1 * d);
            const seg = 9;
            const segW = half * 2 / seg;
            for (let s = 0; s < seg; s += 1) {
                const u = (s + 0.5) / seg * 2 - 1;
                const on = smooth((vnoise(s * 1.7 + y * 0.11, t * 0.0016 + y * 0.05) - 0.42) * 5);
                const a = vis * (1 - u * u) * on * (0.95 - 0.4 * d);
                if (a > 0.02) {
                    ctx.fillStyle = css(lit, a);
                    ctx.fillRect(cx0 + shift - half + s * segW, y, segW * 0.9, 2);
                }
            }
        }
    }

05Cloud Bands Whose Undersides Redden First as the Sun Drops

One 160×64 ImageData gets a fbm density per pixel, and underlit rates each of four horizontal layers separately so the bottom ones turn red first. At alt 0.3 the lower two layers glow and at alt 0 the lower three do, while the top layer keeps its own color because LIGHT_REACH 0.9 stops short of 1. That scene measured 75.3% cumulative area and 23/23 moved frames.

Cloud Bands Whose Undersides Redden First as the Sun Drops
Open in a new tab

05 · Cloud Bands Whose Undersides Redden First as the Sun Drops — Measured area 75.346% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

CLOUD_LAYERSUNDERLIT_BIASDRIFT_BANDLIGHT_REACH
    // How much sunlight one cloud layer (0 = top, 1 = bottom) receives; the lower the sun, the higher the light reaches
    function underlit(layerK, alt) {
        const reach = (1 - smooth(alt / 0.55)) * LIGHT_REACH;
        const u = Math.pow(1 - layerK, 1 + UNDERLIT_BIAS);
        return smooth((reach - u) / 0.4);
    }
    function cloudTone(layerK, alt) {
        const dusk = 1 - smooth((alt + 0.1) / 0.5);
        const body = mix([246, 246, 253], [124, 120, 172], dusk);
        const shaded = mix(body, [body[0] * 0.9, body[1] * 0.9, body[2] * 0.96], layerK * 0.4);
        const flame = mix([255, 204, 156], [255, 132, 128], layerK);
        return mix(shaded, flame, underlit(layerK, alt));
    }

        function paintClouds(alt, t) {
            const tones = [];
            for (let l = 0; l < CLOUD_LAYERS; l += 1) {
                tones.push(cloudTone(l / (CLOUD_LAYERS - 1), alt));
            }
            for (let j = 0; j < CLOUD_Y; j += 1) {
                const rowK = j / (CLOUD_Y - 1);
                const layer = Math.min(CLOUD_LAYERS - 1, Math.floor(rowK * CLOUD_LAYERS));
                const tone = tones[layer];
                const envelope = Math.pow(Math.sin(Math.PI * (0.06 + 0.88 * rowK)), 0.8);
                for (let i = 0; i < CLOUD_X; i += 1) {
                    const nx = i / CLOUD_X * 3.4 + t * DRIFT_BAND * (0.5 + rowK);
                    const d = fbm(nx, rowK * 3.3 + 2.1) * envelope;
                    const a = smooth((d - 0.3) / 0.22);
                    const k = 0.9 + 0.2 * d;
                    const o = (j * CLOUD_X + i) * 4;
                    px[o] = Math.min(255, tone[0] * k);
                    px[o + 1] = Math.min(255, tone[1] * k);
                    px[o + 2] = Math.min(255, tone[2] * k);
                    px[o + 3] = 255 * a;
                }
            }
            octx.putImageData(img, 0, 0);
        }

06Layered Ridges That Melt Into the Sky Color With Distance

ridgeTop sets the height of five ridges with fbm, and each farther ridge mixes in more of the current sky color, with haze ratios 0.80, 0.57, 0.35, 0.15 and 0. The share mixed toward dark navy climbs from 0.25 to 0.77 toward the near ridges, so the front stays dark while the back dissolves, which gives a landscape illustration hero its depth. The render came to 75.1% cumulative area and 23/23 moved frames.

Layered Ridges That Melt Into the Sky Color With Distance
Open in a new tab

06 · Layered Ridges That Melt Into the Sky Color With Distance — Measured area 75.139% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

RIDGE_LAYERSHAZE_STRENGTHNEAR_DARKENRIDGE_ROUGH
    // Height of one ridge; baseline, amplitude, frequency and drift speed differ per layer index i (0 = farthest)
    function ridgeTop(i, x, t) {
        const k = i / (RIDGE_LAYERS - 1);
        const base = lerp(176, RIDGE_GROUND, Math.pow(k, 0.9));
        const amp = (16 + 26 * k) * RIDGE_ROUGH;
        const freq = 0.0105 + 0.004 * k;
        return base - amp * fbm(x * freq + i * 31.7 + t * 0.00002 * (1 + 2.4 * k), i * 5.31);
    }

            for (let i = 0; i < RIDGE_LAYERS; i += 1) {
                const k = i / (RIDGE_LAYERS - 1);
                // Nearer ridges go darker, farther ones go toward the current sky color; both come from one ridge index
                const solid = mix(body, [34, 38, 80], 0.25 + NEAR_DARKEN * k);
                const haze = HAZE_STRENGTH * Math.pow(1 - k, 1.2);
                const top = mix(solid, hazeSky, haze);
                const bottom = mix(solid, hazeSky, haze * 0.55);
                const g = ctx.createLinearGradient(0, 130, 0, H);
                g.addColorStop(0, css(top, 1));
                g.addColorStop(1, css([bottom[0] * 0.82, bottom[1] * 0.82, bottom[2] * 0.86], 1));
                ctx.fillStyle = g;
                for (let x = 0; x < W; x += RIDGE_STEP) {
                    const y = ridgeTop(i, x, t);
                    ctx.fillRect(x, y, RIDGE_STEP + 1, H - y);
                }
            }

07Stars That Appear One by One as the Sky Darkens

Each of the 90 stars has a brightness b and its own sky-brightness threshold thr between 0.2 and 0.62, and when the sky behind it drops below that threshold smooth fades it in. Bright stars come out first and faint ones trail, so the visible count grows from 4 at alt 0.14 to 13 at 0 and 48 at −0.16, which suits a dusk-to-night transition. Its render logged 74.2% cumulative area and 23/23 moved frames.

Stars That Appear One by One as the Sky Darkens
Open in a new tab

07 · Stars That Appear One by One as the Sky Darkens — Measured area 74.174% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

STAR_COUNTVISIBLE_MINVISIBLE_MAXMAG_SPREADTWINKLE_BAND
    function makeStars() {
        const rnd = mulberry32(448);
        const out = [];
        for (let i = 0; i < STAR_COUNT; i += 1) {
            const b = Math.pow(rnd(), MAG_SPREAD);
            out.push({ x: 8 + rnd() * (W - 16), y: 6 + Math.pow(rnd(), 0.9) * (HORIZON - 26), b: b, thr: lerp(VISIBLE_MIN, VISIBLE_MAX, b), phase: rnd() * PI2 });
        }
        return out;
    }

            for (let i = 0; i < stars.length; i += 1) {
                const s = stars[i];
                // Reference for one star: it starts to show once the sky brightness there falls below its threshold
                const sky = luma(skyAt(alt, s.y / HORIZON));
                const vis = smooth((s.thr - sky) / 0.07);
                if (vis > 0.02) {
                    shown += 1;
                    const a = vis * (1 - TWINKLE_BAND * (0.5 + 0.5 * Math.sin(t * 0.004 + s.phase)));
                    const r = 0.7 + 1.5 * s.b;
                    ctx.fillStyle = 'rgba(255,252,240,' + a.toFixed(3) + ')';
                    ctx.beginPath();
                    ctx.arc(s.x, s.y, r, 0, PI2);
                    ctx.fill();
                    if (s.b > 0.45) {
                        glow(ctx, s.x, s.y, 7 + 8 * s.b, [255, 244, 220], 0.35 * a);
                    }
                    if (s.b > 0.35) {
                        const ry = HORIZON + (HORIZON - s.y) * 0.55;
                        if (ry < H) {
                            ctx.fillStyle = 'rgba(255,248,230,' + (0.5 * a).toFixed(3) + ')';
                            ctx.fillRect(s.x + 3 * Math.sin(t * 0.003 + s.phase), ry, 2 + 3 * s.b, 1.5);
                        }
                    }
                }
            }

08A Sunset Time Scrubber You Drag the Sun Through

arcPoint turns a position s (0 to 1) on the arc into a sun point and an alt, and that alt redraws the sky, stars, clouds, sea and glitter, with the sun x feeding only the glow and the glitter center. The shown s chases the target s by DRAG_SMOOTH 0.22 per frame, and the clock text is 6:00 plus 12 hours × s, so s 0.5 reads h 12:00, which makes the scene a time-of-day preview control. The figures were 75.5% cumulative area and 23/23 moved frames.

A Sunset Time Scrubber You Drag the Sun Through
Open in a new tab

08 · A Sunset Time Scrubber You Drag the Sun Through — Measured area 75.469% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

ARC_RADIUSDRAG_SMOOTHDAY_CLAMPSCRUB_STEP
    // Position s on the arc (0 = left end, 1 = right end) -> screen point and height of the sun
    function arcPoint(s) {
        const x = ARC_CX - ARC_RADIUS * Math.cos(Math.PI * s);
        const y = ARC_CY - ARC_RADIUS * Math.sin(Math.PI * s);
        return { x: x, y: y, alt: (HORIZON - y) / SUN_RISE };
    }
    // Pointer position -> s on the arc; below the arc it snaps to the nearer end
    function sFromPointer(px, py) {
        const ang = Math.atan2(ARC_CY - py, px - ARC_CX);
        if (ang < 0) {
            return px < ARC_CX ? DAY_CLAMP : 1 - DAY_CLAMP;
        }
        return clamp(1 - ang / Math.PI, DAY_CLAMP, 1 - DAY_CLAMP);
    }

        function tick(ts) {
            if (last === null) {
                last = ts;
            }
            const dt = Math.min(ts - last, 160);
            last = ts;
            if (!paused) {
                if (!manual) {
                    t += dt;
                    target = 0.5 + (0.5 - DAY_CLAMP) * Math.cos(PI2 * t / AUTO_MS);
                }
                shownS += (target - shownS) * (1 - Math.pow(1 - DRAG_SMOOTH, dt / 16.7));
                show();
            }
            raf = requestAnimationFrame(tick);
        }

09A Pure CSS Sunset Gradient Moving Its Stops Through Registered Properties

Ten @property registrations hold the three sky colors, two stop positions, the sun position and color, two sea colors and the glint opacity, and a single keyframe set at 0, 30, 55, 80 and 100% glides between their values with no script. A checkbox with a <label> handles pausing through :has, so the scene fits a place that needs a light sunset background. It came out at 73.1% cumulative area and 23/23 moved frames.

A Pure CSS Sunset Gradient Moving Its Stops Through Registered Properties
Open in a new tab

09 · A Pure CSS Sunset Gradient Moving Its Stops Through Registered Properties — Measured area 73.117% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

@property--sky-top--stop-a--sun-y
@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #807eb6;
}

@property --sky-mid {
  syntax: "<color>";
  inherits: true;
  initial-value: #b38fa8;
}

@property --sky-low {
  syntax: "<color>";
  inherits: true;
  initial-value: #e6b7ab;
}

.sc__glint {
  position: absolute;
  inset: -1em 0;
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--sun) 55%, white) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(180deg, white 0 1px, transparent 1px 14px);
  clip-path: polygon(61% 0, 69% 0, 82% 100%, 48% 100%);
  mask-image:
    linear-gradient(90deg, transparent 40%, #000 56%, #000 74%, transparent 90%),
    repeating-linear-gradient(90deg, #000 0 6%, transparent 6% 7.5%, #000 7.5% 15%, transparent 15% 17%, #000 17% 24%, transparent 24% 25%);
  mask-composite: intersect;
  opacity: var(--glint-a);
  animation: shimmer 1.6s linear infinite;
}

Where the Values Change the Scene — Sun Height, Haze Strength, Glitter Width

A lower starting height opens the page on the sunset side

SUN_ALT in 01 is the height the auto run starts from. Moving it from 0.5 to 0.2 drops the sun's y from 111 to 156, and the first status line changes from The sun is leaning — a golden afternoon to The sun is low — sunset glow.

Haze sends the far ridges to the sky first

HAZE_STRENGTH in 06 is the leading factor of the haze formula HAZE_STRENGTH × (1 − k)^1.2. At 0.95 instead of 0.8 the farthest ridge goes from 0.8 to 0.95, the second from 0.57 to 0.67 (computed from the formula, not measured), and the nearest ridge stays at 0.

Glitter width widens with perspective

GLITTER_WIDTH 22 sits inside the half-width 22 × (0.35 + 1.1 × d), which gives 7.7, 19.8 and 31.9 px at d 0, 0.5 and 1 (the real last row is d 0.98, about 31.7 px). At 34 the same three points become 11.9, 30.6 and 49.3 px, and setting ROW_JITTER to 0 turns the broken road into one unbroken column.

The table collects what the last full render measured. Cumulative area stays between 73.1% and 75.5%, and every one of the nine scenes moved in 23 of 23 frames.

Scene Cumulative area Mean intensity Moved frames
01 Sky color band 74.2% 31.3 23/23
02 Scattering rows 73.9% 37.4 23/23
03 Flattened sun 75.4% 32.7 23/23
04 Glitter path 74.9% 32.3 23/23
05 Cloud underlight 75.3% 22.9 23/23
06 Ridge haze 75.1% 39.3 23/23
07 Emerging stars 74.2% 36.6 23/23
08 Time scrubber 75.5% 29.5 23/23
09 Pure CSS sunset 73.1% 59.7 23/23

Where It Breaks — Narrow Screens, a Sun Below the Horizon, Low Color Contrast

Things switch off one by one once the sun passes the horizon

The glitter in 04 hits visibility 0 at alt −0.08 and is fully off. The disc in 03 is cut in half at alt 0 with only the top half showing, and it disappears below alt −0.088. The sea mirror of the disc is centered at 2 × 186 minus the sun y, so at alt −0.1 the center is y 171, the vertical radius is 13.2 and the bottom edge stops at 184.2, never reaching the sea rows (y 187 and below). The color bands freeze at their end colors below −0.15, so 07's to of −0.16 uses the same color as −0.15.

Color change crowds the horizon

At the middle of a row in 01 (v 0.5) the horizon color weighs only 0.5 to the power 1.7, which is 0.31. Lowering SKY_BLEND to 1 makes the weight 0.5 and the result close to a straight gradient. In 02 the path length is 0.9 to 1.7 from eye height 0.5 upward and then jumps to 5 to 10 in the bottom 10%, so the colors crowd the horizon the same way.

Scene 02 knows nothing about left and right

The color in 02 is set by the row alone, so the sky never brightens toward the sun's side. Raising RED_KEEP to 1 sets the red channel loss to 0, which keeps the red light from being trimmed even at a low sun. The glow around the sun comes from the separate glow call in the same scene.

Scene 03 looks round above alt 0.32

For a sun higher than REDDEN_AT 0.32, low is 0 and the disc is a full circle. To show the flattening and the red tint at higher heights, raise REDDEN_AT or start lower.

Scene 05 leaves its top layer unlit

Because LIGHT_REACH is 0.9, the top layer gets no underlight at any alt. Setting it to 1 or more lets the glow reach the top, and the soft cloud edges come from stretching the 160×64 image three times, which is intended.

Scene 07 barely shows its faintest stars

The faintest star (b near 0) has a threshold of 0.2, and the lowest zenith brightness is 0.184 at alt −0.16, so smooth only reaches about 0.14. That is why just 48 of the 90 stars show; lowering VISIBLE_MIN below 0.184 brings the faint ones out.

Scene 08 snaps to an end when you press below the arc

sFromPointer pulls a press below the arc to the nearer end (DAY_CLAMP 0.015, alt −0.065), so the point (240, 230) gives s 0.985. While you drag, the target s changes at once but the shown s trails by 22% per frame at 60 fps.

Scene 09 needs newer CSS

A browser without @property cannot interpolate the colors, so they jump at the keyframe boundaries. color-mix, :has and mask-composite are required too. The checkbox is hidden as a transparent 1 px box, so the focus ring is drawn on the label.

The status text, narrow screens and arrow keys

The status text sits on a white pill (rgba(255, 255, 255, .85)) with dark ink, so it never depends on the sky behind it. Below 320 px the button and status text shrink to 10 px and the pill is capped at 58% of the width, while the canvas fills the stage at min(92vw, 160vh − 12.8vw). Scenes 01 to 08 block page scroll with preventDefault while the canvas has focus, so on a long page check that keyboard scrolling still works.

Changing the constants yourself

You can see each edge above by changing SKY_BLEND in 01, REDDEN_AT in 03, LIGHT_REACH in 05 and VISIBLE_MIN in 07 one at a time. The archive opens with the password nx9tfgpu and holds the finished file for all nine scenes.

Three Variants and Accessibility

Name Value Feel
Change the sun height 01 SUN_ALT 0.5 → 0.2 Lowering the starting height from 0.5 to 0.2 puts the sky on the sunset side from the first frame, and it then sinks below the horizon.
Change the haze strength 06 HAZE_STRENGTH 0.8 → 0.95 Raising it from 0.8 to 0.95 melts the farthest ridge almost into the sky, leaving only its outline.
Change the glitter width 04 GLITTER_WIDTH 22 → 34 Widening it from 22 to 34 thickens the road of light under the sun and the gaps shrink visibly even near the horizon.

Each variant is one const NAME = value; line in the source, and the 7.7 to 31.9 px and 11.9 to 49.3 px figures above are values of the source formula at d 0 to 1, not measurements.

With prefers-reduced-motion set to reduce, scenes 01 to 07 do not start a requestAnimationFrame loop and draw one still at the from height. The button becomes Next scene and cycles four heights, the from to to range split in three, and pointer and key input go through takeOver and redraw that very spot at once. Time t stays at 0, so the cloud drift in 05 and the wave stripes stay still too.

Scene 08 keeps its drag, its ←→ keys and its button in reduce, but the start s is 0.8 and the shown s jumps straight to the target with DRAG_SMOOTH ignored. Scene 09 sets both animations to animation: none and stops on the golden still given by the registered initial values.

The canvases in 01 to 08 have tabindex 0 and take focus, and the status text is rewritten only when its wording changes, inside an aria-live="polite" region. Scene 09 pauses with Space on its checkbox label and its aria-live line is fixed.

Is Swapping the Background Color Enough for a CSS Sunset Animation?

For a still image or a short loop it is enough, and 09 takes that seat. Once clouds, sea and stars have to follow one sun height, a keyframe that swaps colors cannot line up the different start times per layer, and the calculation takes over.

Where each scene fits also differs. 01 suits a sunset hero, 02 a generated sky background, 04 a seascape backdrop, 06 a landscape illustration hero, 07 a dusk-to-night transition, 08 a time-of-day preview control and 09 a lightweight background.

The cost differs as well: 06 draws 1,200 ridge slices per frame (240 columns × 5 layers) and 05 computes density for 10,240 cloud pixels (160×64), so check those two frame costs first before laying either under a whole page.

For more of the sea math see 9 Canvas Wave Animation Scenes: Gerstner Field, and for shadows computed from the sun position see CSS Shadow Effects: 9 Demos That Compute the Cast.

Frequently Asked Questions Before Building a CSS Sunset Gradient

Which value sets the speed of a css sunset animation?

Scenes 01 to 07 run on PERIOD_MS 4400, sinking in 2.2 seconds and rising in 2.2, while 08 uses AUTO_MS 7600. In 09 the single $duration 3.2s at the top of the SCSS file sets the pace.

Where do I change the sunset colors to match my page?

In 01 to 08 edit the [sun height, [r, g, b]] pairs in ZENITH_RAMP, HORIZON_RAMP and SUN_RAMP; outside the band (below −0.15 and above 1) the end color holds. In 09 change the hex values at the five keyframe stops.

Do I need a library or WebGL?

Neither. None of the nine files has an external address or a WebGL call, and the scenes draw with canvas 2d and CSS alone, so moving one file is enough for that scene to run.

Enter the archive password

The password is inside this article. You will find it as you read.