CSS gradients are a way to create smooth color transitions using pure CSS, with no image files required. They are used for hero section backgrounds, button hover states, card overlays, progress bars, and countless other UI elements. Modern CSS gradient syntax is powerful but not always intuitive to write by hand.
Types of CSS Gradients
A linear gradient transitions colors along a straight line. You define the direction (an angle or a named direction like to right or to bottom left) and the color stops. A background that fades from blue on the left to purple on the right is a linear gradient at a 90-degree angle.
A radial gradient transitions colors outward from a center point in a circular or elliptical pattern. It is useful for spotlight effects, glow effects, and circular backgrounds.
A conic gradient transitions colors around a center point, like the hands on a clock face sweeping through colors. Conic gradients are newer and less widely used but useful for pie chart visualisations.
Color Stops
A color stop defines where a particular color begins and ends in the gradient. By default, stops are evenly distributed between the two endpoints. You can specify exact positions as percentages or pixel values. Multiple color stops create multi-color gradients, and you can place stops at the same position to create hard edges instead of smooth transitions.
The Background-Image Property
Gradients in CSS are values for the background-image property (not background-color). The correct property is background-image: linear-gradient(...). A common pattern uses both properties with background-image as the gradient and background-color as a fallback for browsers that might not render the gradient (extremely rare now).
Using the DevHexLab Gradient Generator
Open the tool at /tools/color/gradient-generator. Choose the gradient type. Pick colors for each stop and drag the stops to position them. The preview element shows the result live. When it looks right, click Copy CSS to grab the property ready to paste into your stylesheet.
Frequently Asked Questions
Do I need vendor prefixes?
Modern browsers handle CSS gradients without vendor prefixes. The -webkit-linear-gradient prefix was needed for older Chrome and Safari versions but has not been required since 2012.
Can I use gradients as text fill colors?
Yes. Apply the gradient to a parent element's background, set background-clip: text, and set color: transparent on the text element. This clips the background to the text shape, creating gradient-filled text.
How do I make a transparent gradient?
Use rgba or hsla color values in your stops, or use the keyword transparent. For example, a gradient from a solid color to transparent creates a fade-out effect.
Build gradients visually, copy the CSS, and move on.