Gradient Screen

Design a gradient and view it across your entire display. Choose a direction or a radial glow, two or three colours, and either a smooth blend or a set number of solid bands. It is useful for ambient light, a calm backdrop for presentations, or to export a wallpaper sized to your exact screen.

Solid Color Screens Runs in your browser

Build a Full-Screen Gradient

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Direction

Start color

End color

Add a middle color

Bands0 = smooth gradient; 2–64 = that many solid bands.

How to Use the Gradient Screen

Choose a Direction and the Start and End colours; tick Add a middle color for a three-stop blend.
Set Bands to 0 for a smooth gradient or 2–64 for visible steps.
Press Full screen to view it, or Download PNG to save it at your screen's full pixel resolution.

About This Tool

Designers testing a gradient at real size, presenters and streamers who want a soft background, and anyone making a simple wallpaper.

Input: Colors, direction, steps · Output: Full-screen gradient, PNG.

Features and Limitations

Features

Linear (four directions) and radial gradients with two or three colours.
Stepped mode turns the blend into equal solid bands, handy for palettes and banding comparisons.
Download as a PNG at your screen's physical resolution (up to 7680 pixels wide).
Redraws sharply at device resolution when entering or leaving full screen.

Limitations

Colours are blended in sRGB like CSS gradients, which can look slightly darker in the middle than perceptual blending.
Smooth gradients can show faint banding on 6-bit or heavily compressed displays; that is the display, not the image.
Results are computed in your browser; nothing you enter is sent to a server.

Frequently Asked Questions

What size is the downloaded PNG?

Your screen size in CSS pixels multiplied by the device pixel ratio, for example 2880 × 1800 on a 1440 × 900 Retina display.

Why do I see stripes in a smooth gradient?

Many displays have limited bit depth or use dithering. The Gradient Banding Test helps you check how your screen handles smooth ramps.

Can I make a radial glow?

Yes. Choose Radial: the start colour is in the centre and the end colour reaches the farthest corner.