CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code.
By Syed Mubashir Ali · Last updated
Angle cheat sheet
The angle number is the part people always have to look up, so here it is in one place. 0deg runs bottom to top (yes, zero means up: it's the quirk everyone trips on). 90deg runs left to right. 180deg runs top to bottom. 270deg runs right to left. Diagonals: 45deg goes bottom-left to top-right, 135deg goes top-left to bottom-right, 225deg top-right to bottom-left, 315deg bottom-right to top-left.
In practice you'll use three of them constantly: 180deg for the standard top-to-bottom fade (page headers, image overlays), 135deg for the diagonal that every startup hero section used in 2019 (still looks fine), and 90deg for horizontal fades. Radial gradients ignore angles entirely. They spread from a centre point outward, which is what you want for glows, vignettes and spotlight effects.
Three gradients that always look good
If gradients feel risky, it's usually because the colours are fighting. These three combinations are hard to get wrong.
The readable photo overlay
linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%) over a photo, with white text on the dark part. This is the single most-used gradient on the web: card images, hero banners, video thumbnails. The transparent start keeps the photo visible; the dark end guarantees the text reads.
The subtle brand wash
Two stops of your brand colour, one at 8–12% opacity fading to transparent, at 135deg, over a white or near-white background. It adds colour without shouting. Most 'clean' SaaS landing pages are doing exactly this behind their headlines.
The hard split
Two stops at the same 50% position in two different colours: an instant two-tone background with a razor line down the middle. Popular for split-screen heroes and pricing section dividers. No image, no extra divs, one line of CSS.
How to Use CSS Gradient Generator
- 1Choose Linear for a gradient that runs in one direction, or Radial for one that spreads out from the centre in a circle.
- 2For a linear gradient, drag the angle slider (0–360°): 90° runs left to right, 180° top to bottom, and 135° diagonally.
- 3Set each colour stop's colour and its position along the gradient (0–100%). Add more stops for multi-colour gradients; you need at least two.
- 4For hard-edged stripes or a split background, put two stops at the same position: the blend becomes an instant line instead.
- 5Watch the live preview update as you change anything.
- 6Press 'Copy CSS' and paste the background rule into your stylesheet.
Frequently Asked Questions
What CSS does it produce?
A single background declaration, for example 'background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);' or 'background: radial-gradient(circle, #6366f1 0%, #8b5cf6 100%);'. Stops are written in order of position, whatever order you added them in. It works on any element with a background.
How do CSS gradient angles work?
The angle is the direction the gradient travels: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom and 270deg right to left. 135deg runs from the top-left corner towards the bottom-right.
What do stop positions do?
Each stop fixes a colour at a point along the gradient. Between two stops the colours blend. Moving stops closer together makes a sharper change; putting two stops at the same position makes a hard line, which is how striped and split-colour backgrounds are made.
Can I use a gradient on text or a border?
Yes, with a little extra CSS. For gradient text, set the gradient as the background, then add 'background-clip: text' and 'color: transparent'. For a gradient border, a common approach is a gradient background on a wrapper with padding, and a solid background on the element inside.
Do CSS gradients work in all browsers?
Yes. linear-gradient() and radial-gradient() without vendor prefixes work in every current browser, including Chrome, Safari, Firefox and Edge. Gradients are drawn by the browser, so they stay sharp at any size and add no image download.
How do I make a transparent gradient?
Use a colour with transparency in one of the stops, such as an 8-digit hex like #00000080 (black at 50%) or rgba(0,0,0,0.5). Fading to transparent over a photo is a common way to make text on it readable.
Why does my gradient look banded instead of smooth?
That's colour banding: the screen can't show enough shades between two similar colours, so you see stripes. It happens most with dark, subtle gradients. The fixes: pick stops further apart in lightness, add a middle stop to shorten the blend, or overlay a whisper of noise. For most web work, slightly stronger colour differences just look better anyway.
About CSS Gradient Generator
There was a time when every gradient on the web was a PNG: a 40 KB image, fixed size, blurry on retina screens, one more HTTP request. Then CSS gradients arrived and the whole category of image file became obsolete. The Gradient Generator is the visual way to build them: pick colours, drag the angle and the stops, watch it live, copy one line of CSS.
The output is a single background declaration that works on any element. Because the browser draws the gradient at render time, it's razor sharp at every screen size and costs zero bytes of image download. It compresses down to almost nothing in your stylesheet. Two or three stops in neighbouring colours look modern and safe; that's most hero sections and buttons you'll see.
A few honest limits: gradients can't do everything an image can (no photographic detail, obviously), and very subtle dark gradients can band on cheap screens. But for backgrounds, overlays, buttons and decorative panels, they're the right tool: faster than images, easier to tweak, and they never pixelate.