CSS gradients are native, scalable, and require no image files. A gradient that would have been a 10 KB JPEG background image in 2005 is now a few dozen characters of CSS. Modern gradient syntax in CSS is expressive enough to create every design effect from subtle depth to vivid multi-color designs.
Linear Gradients in Depth
A linear gradient transitions between color stops along a straight line. The direction can be specified as an angle in degrees (0deg is bottom to top, 90deg is left to right, 180deg is top to bottom) or as a named direction (to right, to bottom left).
Colors stops define where each color starts, holds, and transitions. A simple two-color gradient has an implicit start and end. Multiple stops create bands of color or complex color sequences.
Hard stops (placing two colors at the exact same position) create a sharp boundary rather than a smooth transition. This technique is used for striped patterns and segmented designs.
Repeating linear gradients (using repeating-linear-gradient) tile the gradient at regular intervals, which is useful for creating diagonal stripe patterns or repeating color bands.
Radial Gradients
A radial gradient radiates from a center point (or an ellipse center) outward. The center position is set with at X Y (for example, at center, at 30% 70%, or at top right). The shape can be circle or ellipse.
Radial gradients are used for spotlight effects (a lighter circle fading to a darker background), glow effects around interactive elements, and decorative circular backgrounds.
Conic Gradients
A conic gradient rotates color transitions around a center point like a color wheel. The syntax is similar to radial gradients: conic-gradient(from angle at center, color stops). A full 360-degree rotation creates the appearance of a pie chart when color stops are positioned at appropriate angles.
The CSS Gradient Generator vs Hand-Coding
Hand-coding gradients by guessing degree values and color stop positions is tedious. A visual gradient generator lets you drag stops, pick colors, and see the exact result before copying the CSS. This is the right tool for any gradient more complex than a simple two-color transition.
Using the DevHexLab CSS Gradient Generator
Open the tool at /tools/css/css-gradient-generator. Choose the gradient type. Pick colors and drag stops. Adjust the angle or center. Preview the live result. Copy the CSS property.
Frequently Asked Questions
Can I layer gradients with other backgrounds?
Yes. CSS background-image accepts multiple comma-separated values. A semi-transparent gradient can overlay a background image: background-image: linear-gradient(to bottom, transparent, #000), url(photo.jpg).
How do I create a diagonal stripe pattern?
Use repeating-linear-gradient at a 45-degree angle with alternating opaque and transparent color stops at equal positions. The CSS is compact and the pattern tiles seamlessly.
Build gradients visually and copy the exact CSS.