← Back to Chapters

CSS Gradients: Linear, Radial & Conic

? CSS Gradients: Linear, Radial & Conic

⚡ Quick Overview

CSS Gradients let you blend multiple colors smoothly without using images. They are great for modern backgrounds, buttons, cards, and UI elements while keeping pages lightweight and scalable.

All gradients are usually applied with the background or background-image property and come in three main types:

  • Linear Gradient – colors blend along a straight line (horizontal, vertical, or diagonal).
  • Radial Gradient – colors radiate outwards from a center point in a circle or ellipse.
  • Conic Gradient – colors rotate around a center point like slices of a pie chart.

✨ No images required

? Key Concepts

  • Direction / Angle (for linear gradients) – use keywords like to right or angles like 45deg.
  • Color stops – define which colors appear and where (e.g., red 10%, blue 90%).
  • Shape & position (for radial gradients) – shapes like circle or ellipse and positions like at top left.
  • Starting angle & center (for conic gradients) – use from and at to control rotation and center point.
  • Fallback colors – a solid background color can be provided before a gradient for older or limited browsers.

? Syntax & Theory

Gradients are functions used as values of background / background-image. Here is the general syntax for each gradient type:

? View Gradient Syntax 
/* Basic gradient function syntax for all three types */
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

Linear gradients move along a direction, for example to right, to bottom right, or an angle like 135deg.

Radial gradients start from the center by default, but you can control shape and position, such as circle at center or ellipse at bottom left.

Conic gradients rotate around a center point. You can set the starting angle with from and center with at, like from 90deg at center.

? Live Output (Visual Demo)

Gradient Background Examples

Below are sample boxes that use linear, radial, and conic gradients as backgrounds.

Linear Gradient – to right
Linear Gradient – 45deg
Radial Gradient – circle at center
Radial Gradient – ellipse at bottom left
Conic Gradient – from 0deg
Conic Gradient – from 90deg at center

Each box uses a different gradient function and parameters to control direction, shape, and colors.

? Code Examples

? View CSS Gradient Classes 
/* Linear gradient backgrounds */
.linear-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.linear-angle {
background: linear-gradient(135deg, #00c6ff, #0072ff);
}

/* Radial gradient backgrounds */
.radial-bg {
background: radial-gradient(circle, #43cea2, #185a9d);
}
.radial-ellipse {
background: radial-gradient(ellipse at bottom left, pink, purple);
}

/* Conic gradient backgrounds */
.conic-bg {
background: conic-gradient(from 0deg, red, yellow, green, blue, red);
}
.conic-90 {
background: conic-gradient(from 90deg at center, #ff6a00, #ee0979, #ff6a00);
}
? View HTML Markup for Demo Boxes 
<!-- Example gradient demo structure -->
<div class="linear-bg">Linear Gradient to right</div>
<div class="linear-angle">Linear Gradient at 135deg</div>
<div class="radial-bg">Radial Gradient circle</div>
<div class="radial-ellipse">Radial Gradient ellipse at bottom left</div>
<div class="conic-bg">Conic Gradient from 0deg</div>
<div class="conic-90">Conic Gradient from 90deg</div>

✅ Tips & Best Practices

  • Use gradients to enhance buttons, cards, banners, and full-page backgrounds for a clean, modern look.
  • Control color distribution with color stops like red 10% and blue 90% to avoid harsh transitions.
  • Combine gradients with images using background-blend-mode for advanced visual effects.
  • Provide a solid background-color before the gradient as a graceful fallback.
  • Use tools such as cssgradient.io to design and preview gradients visually.
  • Remember: radial gradients expand outward from a point, while conic gradients rotate around a center like a color wheel.

? Try It Yourself

  • Create a div with a diagonal linear gradient using to bottom right and apply it as a card background.
  • Make a circular button with a radial gradient background and white text. Add padding and border-radius to make it look clickable.
  • Design a conic gradient that starts at 90deg and includes five different colors for a pie-like effect.
  • Add a hover effect that changes the gradient using :hover and a smooth transition.
  • Experiment with mixing gradients and transparency using RGBA colors (e.g., rgba(255, 0, 0, 0.7)).
? Sample Practice Starter Code 
/* Starter styles for experimenting with gradients */
.gradient-card {
width: 260px;
padding: 20px;
border-radius: 16px;
color: #ffffff;
text-align: center;
background: linear-gradient(to bottom right, #4facfe, #00f2fe);
transition: background 0.4s ease;
}

.gradient-card:hover {
background: radial-gradient(circle at top left, #ff9a9e, #fecfef);
}