What a gradient is
A gradient is a smooth blend from one colour into another. On the web it is drawn by the browser from a single line of CSS, so it costs nothing to load, stays sharp on any screen and resizes with the element it sits on. That is why gradients are everywhere: hero sections, buttons, app backgrounds, story templates and phone wallpapers.
This generator writes that line for you and shows exactly what it draws. The same numbers paint the PNG, so the image you download matches the preview.
Linear, radial and conic
A linear gradient runs in a straight line at an angle: 180° goes from top to bottom, 90° from left to right, 135° diagonally. It is the calm, versatile choice for backgrounds.
A radial gradient spreads out from a point, like light from a lamp; move the centre to the top for a spotlight or to a corner for a soft glow. A conic gradient turns around a point, like the hands of a clock — use it for colour wheels, pie-like effects or a bold abstract background. Repeat the first colour at the end of a conic gradient so the seam disappears.
The CSS, explained
The code starts with a solid background colour and then the gradient. Every current browser shows the gradient; the first line is a fallback for anything that can't, such as some email apps. Colours are hex codes and each is followed by its position in percent: “#ff7e5f 0%, #feb47b 100%” means the first colour at the start and the second at the end. Put two colours at nearly the same position for a sharp edge instead of a blend.
Using Tailwind? The Tailwind tab gives the same gradient as an arbitrary value class you can paste straight into your markup.
Choosing colours that blend well
The easiest gradients use neighbouring hues — orange to pink, blue to teal — or two shades of the same colour. Very different hues, such as red to green, pass through a muddy grey in the middle; add a third colour in between to keep the blend bright. For a background people will read text on, keep the colours close in lightness: the preview tells you whether black or white text reads better on the whole gradient.
Short on ideas? Take your brand colours from the colour palette generator, or tap Random a few times — every random gradient is built from two related hues so it never looks accidental.
Gradient wallpapers and backgrounds
The PNG sizes cover the usual places: 1080×1920 for a phone wallpaper, an Instagram or TikTok story and a Reel cover; 1080×1350 for a feed post; 1080×1080 for a square; 1920×1080 for a desktop or a YouTube background; and 3840×2160 for a 4K screen. A barely visible grain is added to the image so large, smooth gradients don't show stripes (banding) on phone screens.
Private by design
Everything runs in your browser. Nothing you make is sent anywhere, there is no watermark, and you can use the CSS and the images for anything, including commercial work.