CSS Gradient Generator
Choose a gradient type, set the angle and colour stops, and see the result before you copy the CSS.
Deze inhoud is in het Engels.
Uitgewerkte voorbeelden
Diagonal left to right gradient
Colours #ff4a1f and #0066cc with a linear gradient at 90 degrees
background: linear-gradient(90deg, #ff4a1f, #0066cc);
At 90 degrees the gradient runs from left to right, because 0 degrees points up.
Gradient running upwards
The same two colours with the angle left at its default of 0 degrees
background: linear-gradient(0deg, #ff4a1f, #0066cc);
At 0 degrees the first colour sits at the bottom and the second at the top.
Over CSS Gradient Generator
A CSS gradient is a background made from a smooth blend of colours, and it is drawn by the browser rather than loaded as an image. That means gradients stay sharp at any size, add no extra download, and are easy to change later. This generator lets you choose a linear, radial or conic gradient, set the angle, and place up to five colour stops at the positions you want. The preview updates as you work, so you can see exactly how the blend will look before you use it.
Linear gradients run in a straight line at the angle you set, where 0 degrees points up and 90 degrees points right. Radial gradients start at the centre and spread outwards, and conic gradients sweep around the centre like the hands of a clock. Each colour stop has a position between 0% and 100%, and the tool arranges them in order in the CSS. Copy the single line of code and place it in the background property of any element on your page.
Zo gebruikt u CSS Gradient Generator
- Choose linear, radial or conic from the gradient type list.
- Set the angle in degrees if you chose a linear or conic gradient.
- Change each colour and position, and add or remove stops up to five.
- Check the preview, then copy the CSS and paste it into your stylesheet.
Veelvoorkomend gebruik
- Adding a soft background to a hero section or call to action
- Creating a button or badge with a gradient fill
- Making a conic ring or pie-style chart with no image file
- Placing a fade behind a photo so overlaid text is easier to read
Veelgestelde vragen
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient changes colour outwards from the centre in a circle. A conic gradient changes colour around the centre, like a sweep, which is useful for pie charts and rings. Pick the type that matches the shape of change you want, then adjust the angle and stops until it looks right.
How does the angle work in a linear gradient?
The angle is measured in degrees clockwise from the top of the element. An angle of 0 degrees runs from bottom to top, 90 degrees runs from left to right, 180 degrees runs from top to bottom, and 270 degrees runs from right to left. Using 135 degrees gives a diagonal from the top left to the bottom right, which is a common choice for backgrounds.
How many colour stops can I use?
This generator supports between two and five colour stops. Two stops make a simple blend between two colours, while three or more let you add a middle colour or create a multi-coloured band. Each stop needs a position from 0% to 100%. Positions can be any value in that range, so you can cluster colours or give one colour a wider share of the space.
Can I use the copied CSS on any element?
Yes. The copied line uses the background property, so it works on any block element, such as a section, card, button or header. For a gradient behind text, make sure the text colour still has enough contrast across the whole range of the gradient. Gradients also work with a background-size or background-position rule if you want to adjust how they fill the element.
Why does my gradient look different from the preview?
The preview shows the gradient at the size of its box, so a gradient on a larger or smaller element can look stretched or compressed. A linear gradient spreads across the whole box, while a radial gradient scales with the box size. Check the result in the real layout on the page, and adjust the stop positions if the transition lands in an unexpected place.