A CSS gradient is a smooth blend between two or more colors, set as a background with linear-gradient() or radial-gradient(). To make one, choose the type, pick your colors and positions, set an angle for linear gradients, and copy the CSS. A visual generator with a live preview is the fastest way to get it right. Here is how gradients work.
Linear blends along a line; radial blends outward from a center point.
Set two or more colors and the percentage position of each.
For linear gradients, the angle (e.g. 90deg) points the blend direction.
Paste the background property into your stylesheet.
Linear vs radial gradients
A linear-gradient(90deg, …) transitions colors in a straight line at the angle you choose. A radial-gradient(circle, …) radiates from the center outwards. Both take any number of color stops with optional positions, like #7c3aed 0%, #06b6d4 100%. Build either visually with the gradient generator.
Tips for good-looking gradients
Blends between hues that are close on the color wheel look smoother; very different hues can pass through a muddy middle. Adjusting your colors in HSL helps. For depth, pair a subtle gradient with a soft box-shadow.
Tip: For a subtle, modern look, use two close shades of the same hue rather than two wildly different colors — it reads as premium rather than loud.
Make a CSS gradient now
Build a linear or radial gradient with a live preview and copy the CSS — free, in your browser.
Open the Gradient Generator →Frequently Asked Questions
How do I create a CSS gradient?
Use linear-gradient() or radial-gradient() as a background, with two or more color stops. A generator builds it for you with a preview.
Can a gradient have more than two colors?
Yes — add as many color stops as you like, each with its own position.
Is my work uploaded?
No — the gradient is generated in your browser.