Pick a gradient type, choose two to four colours with a position for each, set the angle or the centre point, and copy the CSS. The code comes out ready to paste into a stylesheet, a style attribute or a site builder's custom CSS box. There is no preview pane here, so the guide below explains what each setting does to the picture.
A gradient is a list of colour stops. Each stop is a colour and a position along the gradient line, written as a percentage. The browser blends smoothly from one stop to the next. With stops at 0% and 100%, the whole gradient is one long blend. Add a middle stop at 50% and you control the colour exactly at the centre.
If the first stop is above 0%, the area before it is filled with that first colour; the same goes for the last stop below 100%. That lets you make a gradient that holds a solid colour for the first third of a box and only then starts to change.
Linear gradients suit page backgrounds, banners and buttons, because the direction can follow the layout: a diagonal at 135 degrees gives a lively feel, while 180 degrees gives a gentle top to bottom fade. Radial gradients work well as a soft glow behind a product image or a headline, with the centre set where the eye should land.
Conic gradients are the least common and the most distinctive. With hard stops they make pie charts and colour wheels; with soft stops and subtle colours they make a metallic sheen. The repeating option tiles the stops, so a pattern that finishes at 20% repeats five times across the box.
The most common mistake is placing white text on a gradient whose light end fails contrast. Test the text against the lightest colour in the gradient, not the average. If one end fails, darken that colour, move its stop further away from the text, or put the text on a solid panel.
Banding, where you can see steps instead of a smooth blend, shows up when two colours are very close and the area is large. A slight difference in brightness plus a mid stop in a different hue usually hides it.
A CSS gradient is an image that the browser draws for you from a few colours, so it needs no file download and stays sharp at every size. You use it anywhere CSS accepts an image, most often as a background.
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient changes colour with distance from a centre point, in a circle or an ellipse. A conic gradient changes colour with the angle around a centre point, which is how colour wheels and pie charts are drawn.
In a linear gradient, 0 degrees runs from bottom to top, 90 degrees from left to right, 180 degrees from top to bottom and 135 degrees from the top left corner to the bottom right. In a conic gradient the angle is where the sweep starts, measured clockwise from the top.
Every current browser draws gradients, so the fallback is rarely needed. If you tick it, the code first sets a plain background-color equal to your first stop, which shows if a gradient cannot be drawn.
Yes. The output is standard CSS. Paste it inside a rule such as .hero { ... }, or into a style attribute on an element.
Related: CSS shadow generator, Hex colour picker, Colour contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.