Mastering CSS Gradients: Linear, Radial, and Conic

Why Gradients Are Back

Flat design had its era, but gradients are back in full force. From subtle "glassmorphism" backgrounds to vibrant buttons, gradients add depth and life to your UI.

Types of CSS Gradients

1. Linear Gradient

The most common type. Colors flow in a single direction.

background: linear-gradient(90deg, #3b82f6, #9333ea);

• Angle: 90deg (left to right), 180deg (top to bottom), or keywords like to right.

2. Radial Gradient

Colors radiate from a center point. Great for spotlights or vignettes.

background: radial-gradient(circle, #ffffff, #e5e5e5);

3. Conic Gradient (New!)

Colors rotate around a center point, like a color wheel or pie chart.

background: conic-gradient(red, yellow, green, blue);

Creating Perfect Gradients

Writing gradient syntax by hand is prone to typos. It's hard to visualize the result just by looking at hex codes.

Use a Generator: Our CSS Gradient Generator lets you visually design the perfect gradient.

• Drag and drop color stops.
• Adjust opacity for transparent overlays.
• Get the code instantly.

Pro Tip: Text Gradients

Did you know you can apply gradients to text?

h1 {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

This requires the -webkit-background-clip property but is supported in all modern browsers.

Go ahead and add some color to your next project!