Synthwave Background
Make a synthwave background: a neon grid running to the horizon, a striped sun, mountains and a starry sky. Pick a size (phone, desktop, 4K, tablet, square post or header) and one of six colour sets, then set the horizon, the sun’s size, height and slices, the stars, the mountains and the grid. The grid is drawn from one camera, so every floor line runs to the vanishing point and the rows close up toward the horizon as real perspective does. Download a PNG at the exact size, an SVG or a PDF poster, or play the grid scroll in the preview. Nothing is uploaded.
100% private — everything runs in your browser. Everything runs in your browser; nothing is uploaded.
The PNG is exactly the size you pick. The PDF fits the scene on one US Letter or A4 page; print at 100% (Actual size). Play grid scroll moves the floor toward you for 600 frames and stops (it pauses while the tab is hidden).
Synthwave background
Sun
Sky and mountains
Grid
Runs in your browser with our own code: nothing you pick is uploaded or saved. Every grid line is drawn from one camera, so all the floor columns meet at the vanishing point on the horizon. You may use what you make here, including commercially, with no credit needed.
How to make a synthwave background
- Pick a preset, or choose a size and colours.
- Set the horizon and the sun: size, height and the number of slices.
- Choose the stars and mountains, and the grid’s columns, rows and spacing.
- Turn the glow on or off and change the seed for other stars and peaks.
- Download the PNG, SVG or PDF poster; Play grid scroll to see it move.
What you can use it for
- Phone and desktop wallpapers
- Stream overlays and video backgrounds
- Album, playlist and podcast covers
- Event posters and flyers
- Website hero and header images
- Laser and plotter line art from the SVG
The 15 presets
| Preset | Size (px) | Colours | Grid | Sun slices | Stars |
|---|---|---|---|---|---|
| Sunset grid, sun with 6 slices, desktop | 1920 × 1080 | Sunset | 16 × 16 | 6 | 107 |
| Phone wallpaper, sunset | 1170 × 2532 | Sunset | 16 × 16 | 6 | 99 |
| 4K desktop, orange sun, cyan grid | 3840 × 2160 | Orange sun, cyan grid | 16 × 16 | 6 | 107 |
| Deep purple, 8 slices | 1920 × 1080 | Deep purple, blue grid | 16 × 16 | 8 | 107 |
| Teal night, many stars | 1920 × 1080 | Teal night, green grid | 16 × 16 | 6 | 256 |
| Red and amber, low sun | 1920 × 1080 | Red and amber | 16 × 16 | 6 | 104 |
| Black and white grid | 1920 × 1080 | Black and white | 16 × 16 | 6 | 107 |
| Grid and stars only | 1920 × 1080 | Sunset | 16 × 16 | no sun | 200 |
| Wireframe mountains | 1920 × 1080 | Sunset | 16 × 16 | 6 | 107 |
| Dense grid: 30 columns, 24 rows | 1920 × 1080 | Sunset | 30 × 24 | 6 | 107 |
| Wide grid: 8 columns | 1920 × 1080 | Sunset | 8 × 10 | 6 | 107 |
| High horizon | 1920 × 1080 | Sunset | 16 × 16 | 6 | 108 |
| Square post 1080 × 1080 | 1080 × 1080 | Sunset | 16 × 16 | 6 | 83 |
| Header 1500 × 500 | 1500 × 500 | Sunset | 16 × 8 | 6 | 102 |
| Tablet wallpaper | 2048 × 2732 | Orange sun, cyan grid | 16 × 16 | 6 | 91 |
Sizes
| Size | Pixels | Width : height | PDF poster on US Letter |
|---|---|---|---|
| Phone | 1,170 × 2,532 px | 0.462 : 1 | 109.1 × 236 mm |
| Phone | 1,080 × 1,920 px | 0.563 : 1 | 132.8 × 236 mm |
| Desktop | 1,920 × 1,080 px | 1.778 : 1 | 184.5 × 103.8 mm |
| Large screen | 2,560 × 1,440 px | 1.778 : 1 | 184.5 × 103.8 mm |
| 4K | 3,840 × 2,160 px | 1.778 : 1 | 184.5 × 103.8 mm |
| Tablet | 2,048 × 2,732 px | 0.75 : 1 | 176.9 × 236 mm |
| Square post | 1,080 × 1,080 px | 1 : 1 | 184.5 × 184.5 mm |
| Header | 1,500 × 500 px | 3 : 1 | 184.5 × 61.5 mm |
The floor rows (default preset)
| Row | Distance z | y (px) | Below the horizon (px) | (y − horizon) × z |
|---|---|---|---|---|
| 0 | 1 | 1080 | 486 | 486 |
| 1 | 1.8 | 864 | 270 | 486 |
| 2 | 2.6 | 780.9 | 186.9 | 486 |
| 3 | 3.4 | 736.9 | 142.9 | 486 |
| 4 | 4.2 | 709.7 | 115.7 | 486 |
| 5 | 5 | 691.2 | 97.2 | 486 |
| 6 | 5.8 | 677.8 | 83.8 | 486 |
| 7 | 6.6 | 667.6 | 73.6 | 486 |
| 8 | 7.4 | 659.7 | 65.7 | 486 |
| 9 | 8.2 | 653.3 | 59.3 | 486 |
| 10 | 9 | 648 | 54 | 486 |
| 11 | 9.8 | 643.6 | 49.6 | 486 |
| 12 | 10.6 | 639.8 | 45.8 | 486 |
| 13 | 11.4 | 636.6 | 42.6 | 486 |
| 14 | 12.2 | 633.8 | 39.8 | 486 |
| 15 | 13 | 631.4 | 37.4 | 486 |
| 16 | 13.8 | 629.2 | 35.2 | 486 |
Desktop 1920 × 1080, horizon at y = 594 px. The last column is the same for every row: that is the perspective rule.
Floor lines through the vanishing point
| Column | x at the bottom (px) | Floor point at z = 2 | Line at that row | Floor point at z = 5 | Line at that row |
|---|---|---|---|---|---|
| -4 | 480 | 720 | 720 | 864 | 864 |
| -3 | 600 | 780 | 780 | 888 | 888 |
| -2 | 720 | 840 | 840 | 912 | 912 |
| -1 | 840 | 900 | 900 | 936 | 936 |
| 0 | 960 | 960 | 960 | 960 | 960 |
| 1 | 1080 | 1020 | 1020 | 984 | 984 |
| 2 | 1200 | 1080 | 1080 | 1008 | 1008 |
| 3 | 1320 | 1140 | 1140 | 1032 | 1032 |
| 4 | 1440 | 1200 | 1200 | 1056 | 1056 |
Columns −4 to 4 of the default preset. Each line runs from the vanishing point (960, 594) to the bottom edge and passes through the floor point W / 2 + X × g / z of every row: the two columns agree.
Sun slices (default preset)
| Gap | Centre y (px) | Thickness (px) | Share of the radius |
|---|---|---|---|
| 1 | 441.5 | 3.47 | 1.5 % |
| 2 | 469.3 | 6.93 | 2.9 % |
| 3 | 497 | 10.39 | 4.4 % |
| 4 | 524.7 | 13.86 | 5.8 % |
| 5 | 552.4 | 17.33 | 7.3 % |
| 6 | 580.1 | 20.79 | 8.7 % |
Sun radius 237.6 px; gaps grow toward the bottom.
The colour sets
| Colours | Sky | Sun | Grid | Ground |
|---|---|---|---|---|
| Sunset: magenta grid, yellow-pink sun | #0d0221 → #7a1c74 | #ffd319 → #ff2975 | #ff2ec4 | #0d0221 |
| Orange sun, cyan grid | #1b0b3a → #c2185b | #fff35c → #ff6f00 | #00f0ff | #0a0420 |
| Deep purple, blue grid | #05010f → #3a0ca3 | #f72585 → #7209b7 | #4cc9f0 | #03000a |
| Teal night, green grid | #001219 → #005f73 | #ffd166 → #ef476f | #06d6a0 | #000a0f |
| Red and amber | #0a0000 → #5c0011 | #ffb000 → #ff1744 | #ff1744 | #070000 |
| Black and white | #000000 → #2a2a2a | #ffffff → #8a8a8a | #e0e0e0 | #000000 |
What prints
| Download | What is in it |
|---|---|
| PNG | The scene at the exact pixel size you pick, up to 3840 × 2160 or 2048 × 2732 |
| SVG | The scene in pixels as vector shapes: sky bands, stars, sun pieces, mountains and grid lines |
| PDF poster | The scene fitted to one US Letter or A4 page, with a check bar |
For neon colour codes and glow CSS, see Neon Colors; for chrome lettering on top, use the Chrome Text Generator.
Which tool to use
| You want | Use |
|---|---|
| A neon grid to the horizon with a sliced sun | Synthwave Background (this page) |
| 70s wavy bands, sunset arches and daisies | Retro Background |
| Glossy buttons and chrome type | Y2K Design Generator |
| Bubbles, sky and glossy blues | Frutiger Aero Background |
| Perspective guides for drawing | Perspective Grid |
Other tools: Perspective Grid prints one-, two- and three-point guides, the Gradient Generator makes plain CSS gradients and the VHS Effect adds tape lines to a photo.
More free tools
Patterns, backgrounds and colour?
Design tools that run privately in your browser, with no sign-up and no watermark.
Frequently asked questions
What is in a synthwave background?
A night sky shading down to a bright horizon, a sun with stripes cut across its lower half, mountain silhouettes, and a glowing grid on the ground running to the horizon. This tool draws all of it with its own code, in six colour sets.
Why do all the grid lines meet at one point?
The grid is drawn as a flat floor seen by one camera. Floor lines that run away from you all head for the vanishing point, the centre of the horizon; the tool places each one through that point, and our tests check every line to within a billionth of a pixel.
Why do the rows get closer near the horizon?
A floor row at distance z appears at height horizon + (H − horizon) / z, so rows at even steps of distance close up toward the horizon. The table below lists the rows of the default preset; (y − horizon) × z is the same for every row.
How are the sun slices made?
The sun is a circle cut by up to 12 horizontal gaps in its lower half; each gap is thicker than the one above it. You pick the number of slices, and the table below gives each gap’s place and thickness for the default preset.
What sizes can I download?
Phone 1170 × 2532 and 1080 × 1920, desktop 1920 × 1080, large screen 2560 × 1440, 4K 3840 × 2160, tablet 2048 × 2732, square post 1080 × 1080 and header 1500 × 500 pixels. The PNG is exactly that size.
Does it animate?
The preview can scroll the floor toward you: press Play grid scroll. It runs for 600 frames and stops, pauses while the tab is hidden and stops when you change anything. The downloads are still images.
Is the glow a blur?
No. Each glowing line is drawn three times, the wider strokes mixed toward the ground colour, so the PNG, SVG and PDF all look the same and print cleanly.
Can I print it?
Yes: PDF poster fits the scene on one US Letter or A4 page; print at 100% (Actual size). For a bigger print, use the 4K PNG.
Is it free?
Yes. There is no sign-up, no watermark and no limit.
Is anything uploaded?
No. Everything is drawn by JavaScript in your browser. Nothing you pick is sent anywhere or saved when you close the page.