Sky gradient

Free packv3.0.0-42D and 3DBackdrop

A vertical two-colour gradient behind everything: a daytime sky, a dawn wash behind a skyline, deep blue under a starfield, or a warm room tone behind a card table. It is the cheapest backdrop there is and the usual first layer of a stack.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 20, 2026

A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

Each pixel blends from the top colour to the bottom colour by its height on the screen raised to the power of curve. At 1 the blend is straight; above 1 the top colour holds longer and the change moves toward the bottom, like a sunset band; below 1 it rises. Values at or below 0 are treated as 0.01, so a wild value never breaks the shader.

It ignores the camera, so the sky stays put however far the level scrolls. Its handle is the backdrop runtime's, so the layer can also fade in and out or have its curve tweened.

Features

Two colour stops — top and bottom, as hex strings with or without alpha.
A curve — one param bends the blend for a low horizon band or a high one.
Live changes — set and setColor at any time, for a time of day or a change of mood.
The cheapest pass — one full-screen pass with almost no maths in it.
In every core bundle — core-2d, core-3d and core-vector already include it.

Good for

Platformers — a clear daytime sky behind the level.
Skylines at dawn or dusk — a warm bottom and a deep top, with silhouettes in front.
Space games — a deep blue base under a starfield or a nebula.
Card and board games — a soft room tone instead of a flat colour.

Make it yours

A navy top over an amber bottom with curve at 1.4 is a sunset; two blues with curve at 0.6 is a bright noon. Add stars over it for night. For a day cycle, blend colours with the color pack each step and set them on the handle.

A quick look

const sky = game.backdrop.add('sky', { curve: 1.4 }, { top: '#1a2a6c', bottom: '#fdbb2d' });
sky.set('curve', 2);                // live
sky.setColor('top', '#000814');     // live

Works with

backdrops — the runtime it registers with; required.
backdrop-stars, backdrop-nebula and backdrop-aurora — layers to stack over it.
color — to blend the colours of a day cycle.
backdrop-raster-bands — for more than two stops, or hard bands.
sky-3d — for a 3D sky with a sun, clouds and a time of day.

Good to know

Two colour stops only; more stops is backdrop-raster-bands, one segment per pair.
It ignores the camera, so a sky that changes as a tall level climbs needs a backdrop of your own.
Its colours are written as they are, not premultiplied, so keep them opaque unless it is the bottom layer.

Add it to a game

With your coding agent

Use the Phaser AE expansion pack "Sky gradient" (@phaser-ae/backdrop-sky) in my game. In the game's folder, add it with `npm run -s packs -- add backdrop-sky`, read its reference, then use it where the game needs it. What it does: https://phaser.io/packs/backdrop-sky.md

Paste it into your agent, in the game's folder.

On phaser.io

Add the "Sky gradient" expansion pack (backdrop-sky) to my game's design, so the build uses it. A two-colour vertical gradient that fills the screen behind the world, with one curve to bend the blend, as the base layer of almost any backdrop stack.

Give it to the Chief, in your game on phaser.io.

Needs

Shader backdrops

Reference

The API, in full

More Backdrop packs

Show all →