Drag the stops, pick the angle, copy the CSS. Linear, radial or conic.
Sample content
Your Headline Sits Here
A paragraph at a normal reading size, so you can see whether the gradient behind it is doing the text any favours.
Call To ActionContrast against the middle of the ramp, by the WCAG relative-luminance formula. White text is the better choice here.
Drag a handle, or focus one and use the arrow keys (Shift for 10%), Home and End, or Delete to remove it. Click the bar to add a stop.
A browser blends between stops in sRGB unless you tell it otherwise, which can put a grey band in the middle of two opposite colours; in oklab blends in a space closer to how the eye works and removes it. It needs Chrome and Edge 111, Safari 16.2 or Firefox 128 and later. Anything older throws the whole background line away, which is exactly when the fallback earns its keep: turn “With fallback” on and a solid background-color in the first stop's colour goes in front of it, so those browsers land on a plain colour instead of nothing.
How It Works
Click one of the twelve presets to load it into the editor, or press Random for two colours from the same family. Switch between Linear, Radial and Conic at any time - your stops come with you.
Drag a handle along the bar, click the bar to add a stop, or focus a handle and use the arrow keys. Set the angle on the dial or with the eight compass buttons; radial and conic get a shape, a size and a centre instead.
Copy the background declaration, download it as gradient.css, or publish a full-bleed demo page to a live link. No account is needed for the 30-minute link, and claiming it is free.
About This Tool
It turns a set of colour stops, an angle and a shape into one line of CSS you can paste onto any element - and tells you, before you copy it, whether text will still be readable on top.
A gradient is the cheapest way to make a flat page look designed: no image to load, no file to host, one declaration that scales to any screen. Writing one by hand is fiddly, though. The angle runs clockwise from the top, stop percentages must be in order or the browser quietly turns your blend into a hard edge, and radial and conic gradients have their own vocabulary. This CSS gradient generator gives you a bar to drag, a dial to turn and a preview the size of a real hero.
Anyone choosing a background: someone holding a page from ChatGPT, a designer picking a header, a marketer building a coming-soon screen, a developer who wants the syntax right first time. You need no CSS to use it, but the output is exactly what you would have written by hand.
Everything runs in your browser. Each stop is a colour and a position from 0 to 100 per cent, kept in order so a stop dragged past its neighbour behaves the way you expect. Linear mode writes a linear-gradient() with an angle in degrees, so the linear gradient CSS reads exactly as it would in your stylesheet; radial mode writes a circle or ellipse with a size keyword and a centre; conic mode sweeps around a point from a starting angle. Whatever you build, the result is a plain CSS background gradient you can drop on a div, a button or the whole body.
The contrast panel measures white and black text against the middle of the ramp with the WCAG relative-luminance formula, and again at the worst point along it, so a pale corner that swallows white text shows up before your visitors find it; the colour contrast checker takes a specific pair further. The sRGB / OKLab switch changes how the browser blends: sRGB is the default and can leave a muddy grey band between two opposite colours, while in oklab blends closer to how the eye works. It needs Chrome and Edge 111, Safari 16.2 or Firefox 128 and later; older browsers drop the whole declaration, which is what the fallback switch is for.
Stops are opaque hex colours: for a fade to transparent, copy the CSS and change a colour to an rgba() value by hand - the CSS formatter will tidy it. Positions are whole per cents, the centre is one of nine keyword spots, and repeating or stacked backgrounds are not covered. Contrast readings assume solid text on the gradient; a shadow or overlay changes the real number.
The publish button below puts a full-bleed demo page - your gradient behind a heading, with the CSS underneath - on a free OxyPages subdomain with HTTPS, in seconds, with no account, so you can see it at real size on a real phone. The link lasts 30 minutes; claiming it is free and keeps it, with your own address and, on paid plans, a custom domain. Instant publishing accepts pages up to 5 MB. See how it works or compare plans.
Questions
More Free Tools
Every tool here runs in your browser and ends the same way: one click and your HTML is on a live link.
Check whether a text and background colour pair passes WCAG AA and AAA, see the ratio, and get the nearest shade that does pass. Live preview, no sign-up.
Tidy minified or messy CSS with consistent indentation, one rule per line and sorted braces. Runs in your browser. Copy or download the result.
Make a coming soon or under construction page with a countdown, your logo and a contact link, then publish it on a free address while you build the real site.
Try It Now
Still Here? Drop It In.
The whole pitch fits in one sentence: your HTML, on a link, in seconds.
Drag and drop your HTML file(s), folders, or ZIP file
or ·
No account needed. Your unclaimed website stays live for 30 minutes on a free subdomain. Claim it to your account to keep it permanently.
