How to create a CSS gradient
- Pick a preset, or choose Linear, Radial or Conic.
- Set the angle, or the shape and position for radial and conic gradients; tick Repeating if needed.
- Edit color stops with the color picker and position slider, and add, remove or randomize stops.
- Click Copy CSS for the full declaration, or Copy value only for just the gradient.
What you can do with CSS Gradient Generator
- Three gradient types
- Create linear-gradient with an angle, radial-gradient as a circle or ellipse, and conic-gradient with a starting angle.
- Unlimited color stops
- Add as many stops as you like; each new stop is placed in the widest gap with a blended in-between color.
- Position control
- Place radial and conic gradients at the center, at an edge or in any corner of the element.
- Repeating gradients
- Switch to repeating-linear, repeating-radial or repeating-conic gradients for stripes, rings and patterns.
- Presets and random
- Start from six presets, or generate a random harmonious gradient with a single click.
- Fallback included
- The copied CSS adds a solid background color first, for email clients or old browsers without gradient support.
Linear, radial and conic CSS gradients explained
CSS gradients are images generated by the browser, so they scale to any size, add no file weight and stay sharp on high-density screens. Linear gradients blend along a straight line set by an angle, where 0deg points up and 90deg points right. Radial gradients spread out from a point as a circle or ellipse, and conic gradients sweep around a center like a color wheel, which makes them useful for pie charts and loading spinners. All three are supported in every modern browser.
A few tips for better gradients. Stops are percentages along the gradient line, and two stops at the same position create a hard edge instead of a blend, which is the basis of CSS stripes. Gradients between very different hues can pass through a dull gray middle; adding a midpoint stop with a brighter in-between color fixes this. For text over a gradient, check contrast at both ends, since a color that passes on the light side may fail on the dark side.
Frequently asked questions
Does the gradient generator send my designs anywhere?
No. The preview and CSS are generated in your browser with JavaScript, and nothing is saved or uploaded. The code you copy is plain CSS that you're free to use in any personal or commercial project.
How do I use the gradient in my CSS?
Click Copy CSS and paste it into a rule, for example a .hero class. It contains two background declarations: a solid color fallback, then the gradient. Use Copy value only if you want to paste the gradient into background-image or another property yourself.
What's the difference between linear, radial and conic gradients?
Linear gradients change color along a straight line at a chosen angle. Radial gradients radiate outward from a point in a circle or ellipse. Conic gradients rotate around a center point, so colors change by angle rather than distance, like a pie chart.
How do I make a hard color stop or stripes?
Give two neighboring stops the same position, for example red at 50% and blue at 50%, to get a sharp edge. Combine hard stops with the Repeating option to create stripes or rings that repeat across the element.
Can I use the gradient as a text color?
Yes, with a little extra CSS. Set the gradient as the element's background, then add background-clip: text and color: transparent. Check that the text stays readable across the full range of colors in the gradient.