CSS Gradient Generator
Design a linear, radial or conic gradient visually and copy the CSS in one click.
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
How to use the CSS Gradient Generator
- Pick a gradient type and set the angle for linear or conic.
- Add colour stops and drag each one to the position you want.
- Copy the generated CSS straight into your stylesheet.
About the CSS Gradient Generator
Build a CSS gradient visually and copy the code when it looks right. Choose the type first: linear, radial or conic. For linear and conic gradients you set the angle anywhere from 0 to 360 degrees, which controls the direction the colours travel or sweep; a radial gradient is drawn as a circle spreading out from the centre. A live preview updates as you work, so you are designing against the real result rather than guessing.
Add as many colour stops as you like, with a minimum of two. Each stop has a colour picker and a position slider from 0 to 100 percent, and the stops are sorted by position for you, so you can drop a new colour in anywhere and it slots into the right place. This is how you get smooth multi-colour blends or sharp bands, depending on how close together you set the positions.
The output is a ready-to-paste background declaration in standard CSS gradient syntax; copy it straight into your stylesheet. It writes a single background property and does not add vendor prefixes, which modern browsers no longer need for gradients. For a shadow to sit under your element, see the box-shadow generator, and to fine-tune a colour value, the hex to RGB converter is handy.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends colours along a straight line whose direction you set with an angle. A radial gradient spreads them outward from the centre in a circle. A conic gradient sweeps them around a centre point like a colour wheel, again controlled by an angle.
How many colours can I use?
As many as you like, with a minimum of two. Each colour is a stop with its own picker and a position from 0 to 100 percent. Adding more stops lets you build multi-colour blends or, by placing stops close together, sharp bands of colour.
What does the position slider do?
It sets where along the gradient each colour sits, from 0 percent at the start to 100 percent at the end. The stops are automatically sorted by position, so moving one past another reorders them correctly. Close positions create a hard edge; spread positions create a soft blend.
Do I need vendor prefixes for the gradient?
No. The tool outputs standard, unprefixed CSS because current browsers support gradients without prefixes. Older syntaxes such as -webkit- or -moz- are no longer necessary for the gradient types produced here.
What exactly does the copy button give me?
A single CSS background declaration using standard gradient syntax, ready to paste into your stylesheet. It sets one background property; it does not generate a full rule or class, so drop it into whichever selector you are styling.