CSS Gradient Generator Guide: Linear, Radial and Conic
CSS Gradient Guide
A CSS gradient is a smooth blend between two or more colors that the browser paints directly, with no image file required. Because the browser renders it in real time, a gradient stays razor sharp at any size, adds nothing to your page weight, and can be changed by editing a single line of code. A gradient generator lets you pick the colors visually and copy the finished CSS.
The three types of gradient
CSS offers three gradient functions, and each spreads color in a different shape.
- linear-gradient blends colors along a straight line in a direction or angle you choose.
- radial-gradient radiates colors outward from a center point, like a spotlight or a soft glow.
- conic-gradient sweeps colors around a center point like the hands of a clock, which is handy for pie charts and color wheels.
Syntax and examples
Each gradient is assigned to the background property. Here is one of each type:
/* Linear: 135-degree diagonal blend */
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
/* Radial: glow from the center */
background: radial-gradient(circle at center, #0ea5e9 0%, #1e293b 100%);
/* Conic: sweep around a point */
background: conic-gradient(from 0deg, #f59e0b, #ef4444, #6366f1, #f59e0b);
Direction, angle, and color stops
Three settings give you full control over how the colors flow.
- Direction or angle: for a linear gradient you can use keywords like “to right” or “to bottom”, or an angle in degrees. 0deg points up, 90deg points right, and 135deg gives a top-left to bottom-right diagonal.
- Color stops: each color can carry a position written as a percentage or a pixel value, such as
#4f46e5 0%and#7c3aed 100%. The position tells the browser where that color is fully applied. - More than two colors: just add extra comma-separated stops, for example red 0%, orange 50%, yellow 100%. The browser blends smoothly between each one.
How to use the CSS gradient generator online
- Choose your first and second colors, and add more stops if you want.
- Pick the gradient type and set the angle or direction.
- Drag the stops to fine-tune where each color sits.
- Copy the generated CSS and paste it into your stylesheet’s background property.
Common use cases
- Hero sections and full-page backgrounds
- Buttons and call-to-action elements
- Cards and panels that need a sense of depth
- Overlays that darken an image so text stays readable
- Because gradients are drawn by the browser, they scale crisply on any screen and save the extra request an image would need.
Tips for better gradients
- Keep enough contrast between the gradient and any text on top so the words stay readable.
- Use
rgba()or thetransparentkeyword for overlay gradients that let part of an image show through. - Check browser support for
conic-gradientif you must support very old browsers; linear and radial are supported almost everywhere. - Subtle two-color blends usually look more professional than many clashing colors.
FAQ
Q: How do I make a diagonal gradient?
A: Use an angle such as 135deg in a linear-gradient, for example background: linear-gradient(135deg, #4f46e5, #7c3aed);. The angle controls the diagonal direction.
Q: What is a color stop?
A: A color stop is a color plus an optional position that tells the browser where that color should appear along the gradient, such as #7c3aed 100%. Adjusting stops changes how quickly one color fades into the next.
Q: Can I animate CSS gradients?
A: Browsers cannot smoothly transition the gradient itself, but you can create motion by animating the background-position, background-size, or the element’s rotation to give the appearance of a moving gradient.