Synth sunset

Pro packv3.0.0-42D and 3DBackdrop

The eighties poster sky in one layer: a gradient, a banded sun sitting on the horizon and a soft halo. It is the backdrop for a neon runner, a retro racer or a vaporwave title screen.

This is a Pro pack. Upgrade to Phaser Pro to use it in your games.See Phaser Pro →

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

The gradient runs from sky at the top to a darkened sun colour at the bottom. A round disc in the sun colour sits at sunY down the screen, sized by sunSize as a fraction of the screen height, and below its middle it is sliced by horizontal haze bands that scroll on the backdrop's clock. A soft halo in the same colour spreads around it.

The disc stays round on any aspect ratio. The layer is opaque and pinned to the screen, so it is the base of the stack: stars or an aurora go over it for a night sky, and the game's road, grid or skyline goes in front.

Features

A gradient sky — from the sky colour down to a darkened sun colour.
A banded sun — a big disc with scrolling haze bands below its middle.
A halo — a soft glow round the disc.
Placement — sunY puts the disc anywhere down the screen and sunSize sizes it.
Two live colours — sky and sun, retinted at any time.
Round on any screen — the disc keeps its shape whatever the aspect ratio.

Good for

Neon runners and retro racers — a sun on the horizon behind the road.
Synthwave and vaporwave title screens — the poster look in one call.
Night versions — a darker palette with backdrop-stars or backdrop-aurora over it.
Rhythm and arcade games — a bold, cheap backdrop behind the play.

Make it yours

The defaults are an orange sun on purple. For a hot-pink sun sinking low, set sunY to 0.7 and the sun colour to a pink. Tween sunY down over a level for a sun that sets while the player plays, and give a portrait screen a smaller sunSize.

A quick look

A sunset, lowered and turned pink live:

const s = game.backdrop.add('sunset', { sunY: 0.62, sunSize: 0.16 }, { sky: '#2a1445', sun: '#ff9a3d' });
s.set('sunY', 0.7);
s.setColor('sun', '#ff3d7a');

Works with

backdrops — the runtime; required.
backdrop-stars and backdrop-aurora — over it for a night sky.
backdrop-raster-bands — for a sunset in hard stripes rather than a smooth gradient.
backdrop-environments — a calmer painted sunset with mountain silhouettes, among its thirteen scenes.

Good to know

It is opaque: nothing beneath it shows, including a background image.
The haze bands are fixed at 70 per screen height.
A portrait screen wants a smaller sunSize.

Add it to a game

With your coding agent

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

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

On phaser.io

Add the "Synth sunset" expansion pack (backdrop-sunset) to my game's design, so the build uses it. An eighties poster sky for 2D games, with a gradient, a big sun on the horizon sliced by scrolling haze bands, and a soft halo.

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

Needs

Shader backdrops

Reference

The API, in full

More Backdrop packs

Show all →