CSS Linear Gradient Generator
FreeGenerate CSS linear-gradient() code visually. Set angle, add color stops, copy CSS instantly. Free, browser-based, no signup.
What's next
Settings guide
Angle reference for linear-gradient:
| Angle | Direction | Use case |
|---|---|---|
| 0deg | Bottom to top | Upward fade |
| 45deg | Bottom-left to top-right | Diagonal (square elements) |
| 90deg | Left to right | Horizontal transition |
| 135deg | Top-left to bottom-right | Diagonal (opposite) |
| 180deg | Top to bottom | Downward fade (default) |
Color stop positioning tips:
- ·Place stops close together for sharp color bands:
#FF5733 49%, #3B82F6 51% - ·Use repeated gradients for patterns:
repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px) - ·Stack gradients for vignette over image:
linear-gradient(rgba(0,0,0,0.6), transparent 40%), url('image.jpg')
Browser support: All major browsers, no prefix needed since 2013. The -webkit- prefix is no longer required.
Format comparison
Linear vs radial gradient: Linear transitions along a line. Radial expands from a center point in a circle or ellipse. For most UI backgrounds and overlays, linear is the right choice. Radial gradients work well for spotlight effects, light source simulations, and circular glows.
Linear vs mesh gradients (CSS): True mesh gradients (smooth multi-directional transitions) are not supported in CSS. Work-arounds include overlapping multiple radial gradients or using an SVG. For single-direction gradients with multiple colors, linear-gradient handles it cleanly.
Performance: linear-gradient() is GPU-accelerated and has no performance overhead compared to solid background colors. Unlike background images, it requires no network request. It recalculates when the element resizes — which is GPU-cheap for most cases. Avoid animating gradient values directly (use opacity instead).
How it works
Set direction
Choose an angle (0–360°) or a direction keyword. 90° means left to right; 180° means top to bottom.
Add color stops
Place two or more color stops on the gradient bar. Drag to reposition. Set percentage positions for precise control.
Preview
See the gradient live in the preview panel — square, wide, and narrow aspect ratios.
Copy CSS
Copy the complete CSS value — ready to paste as a background or background-image property.
About this format
`linear-gradient()` is the most-used CSS gradient function — it creates a smooth color transition along a straight line at any angle. From subtle hero overlays to vibrant button backgrounds to dark reading masks over images, linear gradients are a foundational CSS technique that requires no image assets and renders at any resolution.
A linear gradient needs at minimum: a direction and two colors. The direction is an angle in degrees or a keyword like `to right`, `to bottom`, or `to bottom right`. Colors are specified at stop positions (0%, 50%, 100%) or distributed evenly if positions are omitted. You can add as many stops as needed.
The generated code is a single CSS `background` or `background-image` property value. It works as a standalone background, as an overlay on top of a background image, or as a fill on text using `background-clip: text`.