Gradients: Linear, Radial, and Conic Backdrop Designs

Introduction

In older web standards, if you wanted a button to transition smoothly from a light blue to a dark blue, you had to load a 1-pixel-wide background image and stretch it. If you resized the button, the gradient looked pixelated.

CSS Gradients changed everything. Gradients are mathematical transitions between two or more colors generated programmatically by the browser's rendering engine. Because they are vector-based, they are infinitely scalable, take zero network overhead to download, and can be customized dynamically using code.

---

What You Will Learn

• The core concept of color transitions in CSS.
• The differences between Linear, Radial, and Conic gradients.
• How to define and position Color Stops.
• Utilizing gradients in background shorthands.

---

Prerequisites

• Background Images: Overlay Filters and Multi-Backdrop Layouts

---

Detailed Explanation: Gradient Types

CSS treats gradients as background-image values, not solid colors, because they are rendered as procedural images. There are three main types of gradients:

graph TD
    A[CSS Gradients]
    A --> B[1. Linear Gradients <br> Colors transition along a straight line]
    A --> C[2. Radial Gradients <br> Colors radiate outward from a central point]
    A --> D[3. Conic Gradients <br> Colors transition rotated around a center point]

1. Linear Gradients

Colors transition along a straight vector line. You can control the direction of the line using keywords (e.g. to right, to top left) or specific angles (e.g. 45deg, 180deg).

• Syntax: linear-gradient(direction, color1, color2, ...)

---

2. Radial Gradients

Colors emerge from a single point (the center or custom coordinates) and radiate outward in a circular or elliptical shape.

• Syntax: radial-gradient(shape size at position, color1, color2, ...)

---

3. Conic Gradients (Modern addition)

Colors transition around a central point in a rotational sweep, similar to a pie chart or a color wheel.

• Syntax: conic-gradient(from angle at position, color1, color2, ...)

---

Color Stops

By default, colors are distributed evenly along the gradient line. You can adjust this by specifying percentages or pixels after each color, known as Color Stops:

/* Color 1 occupies 0-10%, transitions to Color 2 at 90-100% */
background: linear-gradient(to right, red 10%, blue 90%);

---

Visual Learning Diagram (Mermaid)

graph LR
    subgraph Gradient Vectors
    Linear[Linear: Straight path transition]
    Radial[Radial: Circular concentric rings]
    Conic[Conic: Rotational sweep around center]
    end

---

Code Examples

Example 1: Classic Header Linear Gradient

Build a premium header background using degrees for the transition angle:

.navbar {
  height: 80px;
  /* 135deg transitions from top-left to bottom-right */
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
}

Example 2: Circular Radial Accent

Create a subtle glow behind a profile avatar card using a radial gradient:

.profile-avatar-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  
  /* Creates a soft blue circular glow at the center fading to dark slate */
  background: radial-gradient(circle, #38bdf8 0%, #0f172a 70%);
}

---

Summary

CSS gradients are vector-based color transitions treated as background images. By utilizing linear paths, radial concentric circular outputs, or conic angular sweeps combined with custom color stops, developers can create rich visual backdrops with zero network latency.

---

Related Articles

• Linear Gradients
• Radial Gradients

Next Tutorial

Let's look at straight-line transitions in detail: Linear Gradients.