Design & Image · 5 min read
How to Create CSS Gradients — Linear, Radial & Conic
CSS gradients are one of the most powerful design tools available in pure CSS. No images needed — just code. Here's the complete syntax guide.
Three Types of CSS Gradients
| Type | CSS Function | Shape |
|---|---|---|
| Linear | linear-gradient() | Straight line in any direction |
| Radial | radial-gradient() | Circle or ellipse from center |
| Conic | conic-gradient() | Rotation around a center point |
CSS Gradient Examples
Linear gradient (diagonal):
background: linear-gradient(135deg, #6366f1, #8b5cf6);
Radial gradient:
background: radial-gradient(circle, #f59e0b, #ef4444);
Fade to transparent:
background: linear-gradient(to right, rgba(99,102,241,1), rgba(99,102,241,0));
Frequently Asked Questions
background: linear-gradient(direction, color1, color2). Direction is an angle like 135deg or a keyword like to right.Linear flows in a line; radial radiates from a center point; conic rotates around a center. All three are supported in modern browsers.
Use
rgba(r,g,b,0) for the transparent color stop. This fades from a solid color to fully transparent.Use PickConverter's CSS Gradient Generator. Choose colors and direction, preview live, and copy the ready-to-use CSS code.
Related Articles
🌈
Generate CSS gradients visually — free
Live preview, copy CSS instantly. No sign-up.
Open Gradient Generator →