By · Updated

Synthwave Grid Background

Retro 80s Neon Grid Floor, Striped Sunset Sun and Moving Horizon

No ratings yet

4 Synthwave Grid Background presets to start from

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Synthwave Grid Background works

This synthwave grid background generator recreates the retro 80s outrun look: a neon grid floor rolling towards you under a striped sunset sun. Pick the sky, sun, grid and floor colours, set the speed and copy the HTML and CSS.

The synthwave style suits music pages, game sites and event banners, and here it is built from gradients alone, with no images.

How the synthwave grid background works

The floor is a wide block with two linear-gradient line patterns crossing to form a grid. It is tilted back with perspective and rotateX, so the lines converge on the horizon. Animating its background-position by one grid cell makes the floor scroll forever without a visible jump.

The striped sun

The sun is a circle with a vertical gradient. A mask-image with hard stops cuts the horizontal gaps across its lower half, giving the classic striped sunset that sits just above the horizon.

FAQ

Can I stop the grid moving?

Yes. Remove the animation line from .synth-floor, or leave it in: visitors who prefer reduced motion already get a still grid through the copied prefers-reduced-motion rule.

How do I add scanlines or a glow?

Layer a scanline overlay on the section for a CRT feel, and add a text-shadow in the grid colour to the heading. Both stack well with the grid without extra markup.

Will the background stretch on wide screens?

Yes. The floor is twice the width of the section and centred, so it covers wide desktop screens as well as phones, and the sun stays in the middle at every width.

See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.

Related tools

Grid Background

Faded grid-line background for hero sections, pure CSS.

Scanline Effect

Retro CRT scanlines with an optional sweeping band.

Starfield Background

Make stars stream past as if flying through space.

Glow Effect

Neon glow for headings and buttons, pure CSS.

Hero Section Builder

Landing page hero sections with fluid headline and buttons.