CSS Gradients: Linear and Radial Gradients0%

The CSS Box Model: Content, Padding, Border, Margin

CSS Gradients: Linear and Radial Gradients

Beginner9 min read•Updated: 2026-10-01

CSS Gradients: Linear and Radial Gradients

Have you ever looked at websites like Instagram, Stripe, or Apple and noticed how their buttons and cards don't just use one flat color, but smoothly transition from warm violet into fiery orange or deep oceanic blue? 🌅

In CSS, this smooth blending of colors is called a Gradient.

Gradients give modern websites depth, energy, and premium visual appeal without requiring heavy Photoshop image files.

In this lesson, you will master:

1
Linear Gradients (colors transition in a straight line or angle)
2
Radial Gradients (colors radiate outward from a central point like circular ripples)
3
Color Stops and Modern Gradient Buttons

Real-Life Analogies: Sunset Skies & Rangoli Powders 🌈

To understand the difference between Linear and Radial gradients, remember these two everyday scenes:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE TWO TYPES OF CSS GRADIENTS                         |
+-------------------------------------------------------------------------+
| 1. LINEAR GRADIENT  --> THE SUNSET OVER THE CRICKET GROUND              |
|                         At 6:00 PM, the sky blends in a straight line:  |
|                         Golden Yellow at the horizon ──▶                |
|                         Rose Pink in the middle       ──▶                |
|                         Deep Twilight Navy at the top!                  |
|                                                                         |
| 2. RADIAL GRADIENT  --> DIWALI RANGOLI / WATER DROPLET RIPPLES          |
|                         Bright Yellow powder placed in the exact center,|
|                         radiating outward in circular rings of orange,  |
|                         and finishing with dark magenta on the rim!     |
+-------------------------------------------------------------------------+

Pro Tip

Important Rule to Remember: In CSS, gradients are considered background images, not colors! Therefore, always apply gradients using background-image or the background shorthand, never background-color.

1. Linear Gradients (`linear-gradient`)

A Linear Gradient transitions colors in a straight direction: from top to bottom, left to right, or along any diagonal angle.

The Basic Syntax:

1.box {
2  background-image: linear-gradient(direction, color1, color2);
3}

1. Default Direction (Top to Bottom):

If you do not specify a direction, the browser automatically blends from top to bottom:

1.card {
2  background-image: linear-gradient(#3b82f6, #1e3a8a); /* Sky blue to navy */
3}

2. Changing Directions with Keywords:

You can use the to keyword to change the flow:

1/* Blends from left to right */
2.hero {
3  background-image: linear-gradient(to right, #ec4899, #8b5cf6);
4}
5 
6/* Blends diagonally to the bottom right corner */
7.badge {
8  background-image: linear-gradient(to bottom right, #f59e0b, #ef4444);
9}

3. Precise Angles (Using `deg`):

Instead of simple words, you can specify exact angles using degrees (deg):

             0deg (To Top)
                   ▲
                   │
  270deg ◀─────────┼─────────▶ 90deg (To Right)
(To Left)          │
                   ▼
           180deg (To Bottom)

Multi-Color Gradients and Color Stops

You are not limited to just two colors! You can blend 3, 4, 5, or more colors together:

1/* The Indian Sunset: 3 blended colors */
2.sunset-header {
3  background-image: linear-gradient(to right, #f97316, #ec4899, #6366f1);
4}

Controlling Where Colors Blend (Color Stops):

By default, the browser spaces out colors evenly. You can specify exact percentages to tell the browser where each color should begin and end:

custom-blend {
background-image: linear-gradient(
  to right,
  #2563eb 0%,   /* Blue starts at 0% */
  #38bdf8 60%,  /* Light blue reaches full strength at 60% */
  #10b981 100%  /* Emerald green finishes at 100% */
);
8}

2. Radial Gradients (`radial-gradient`)

A Radial Gradient starts at a single central point and expands outward in circular or elliptical rings, just like ripples when you toss a pebble into a calm pond!

Basic Syntax:

1.circle-card {
2  background-image: radial-gradient(shape at position, color1, color2);
3}

1. Simple Radial Gradient:

1/* Radiates from center outward */
2.glow-box {
3  background-image: radial-gradient(#60a5fa, #1e3a8a);
4}

2. Controlling Shape (`circle` vs `ellipse`):

By default, radial gradients adjust to the container's proportions as an ellipse (oval). You can force them to stay a perfect circle:

1.circular-glow {
2  background-image: radial-gradient(circle, #facc15, #ea580c);
3}

3. Changing the Center Origin:

You can move the radiant center to any corner or edge using at position:

1/* Light appears to shine from the top-left corner! */
2.spotlight-card {
3  background-image: radial-gradient(circle at top left, #38bdf8, #0f172a);
4}

Modern Gradient Buttons & Cards (Real Examples)

Here is how top software applications create stunning gradient buttons with hover effects:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Modern Gradient Showcase</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 24px;
    margin: 0;
  }
17 
  /* Gradient Card 1: Sunset Vibes */
  .card-sunset {
    width: 280px;
    padding: 30px;
    border-radius: 16px;
    background-image: linear-gradient(135deg, #f97316, #db2777);
    color: white;
    box-shadow: 0 10px 25px rgba(219, 39, 119, 0.4);
  }
27 
  /* Gradient Card 2: Deep Ocean */
  .card-ocean {
    width: 280px;
    padding: 30px;
    border-radius: 16px;
    background-image: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: white;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
  }
37 
  /* Gradient Pill Button */
  .gradient-btn {
    background-image: linear-gradient(to right, #8b5cf6, #ec4899);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    transition: transform 0.2s ease;
  }
51 
  .gradient-btn:hover {
    transform: scale(1.05); /* Slight pop effect */
  }
</style>
56</head>
57<body>
<div class="card-sunset">
  <h3>Design Mastery</h3>
  <p>Learn visual balance, color theory, and UI layout.</p>
  <button class="gradient-btn">Enroll Now</button>
</div>
63 
<div class="card-ocean">
  <h3>Frontend Engineering</h3>
  <p>Build blazing fast web applications with HTML5 & CSS.</p>
  <button class="gradient-btn">Start Free</button>
</div>
69</body>
70</html>

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
`background-color: linear-gradient(...)`	`background-image: linear-gradient(...)`	Gradients are treated as images in CSS, not solid colors.
Forgetting comma after direction: `linear-gradient(to right red blue)`	`linear-gradient(to right, red, blue)`	Comma is strictly required after the direction parameter.
Overusing 10 clashing colors.	Stick to 2 or 3 harmonious, analogous shades.	Too many random colors look like a messy tie-dye shirt!

Quick Revision Summary

A CSS Gradient is a smooth transition between two or more colors.
Gradients are rendered as images: always use background-image or background.
Linear Gradients flow along a straight direction (to right, to bottom, or degrees like 45deg).
Radial Gradients radiate from a center point in circular or elliptical rings.
Color stops allow you to dictate the exact percentage threshold where colors start and stop.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which CSS property should be used to apply a linear gradient background?

Question 2

What is the default direction of a linear-gradient if no direction or angle is specified?

Question 3

Which angle value in degrees creates a gradient that flows horizontally from left to right?

Question 4

How does a Radial Gradient differ visually from a Linear Gradient?

Question 5

In the rule linear-gradient(to right, crimson 0%, gold 50%, navy 100%), what does 50% represent?

Practice Challenge (Try It Yourself)

1
Open your code editor and create gradients.html.
2
Build 3 distinct gradient themes:

Theme 1 (Aurora / Northern Lights): Linear gradient from #10b981 (emerald) to #06b6d4 (cyan) to #3b82f6 (blue).
Theme 2 (Royal Sunset): Linear gradient angled at 45deg from #f97316 (warm orange) to #ec4899 (hot pink) to #8b5cf6 (purple).
Theme 3 (Spotlight Glow): Radial gradient with a circle at center from #fef08a (soft golden glow) to #0f172a (midnight slate).

1
Test your designs on 3 card boxes with white text.
2
Add a hover effect that slightly changes the box shadow to match the card's theme! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with The CSS Box Model: Content, Padding, Border, Margin (The CSS Box Model).

👉 Continue to Next Lesson: The CSS Box Model: Content, Padding, Border, Margin →

Next Lesson

The CSS Box Model: Content, Padding, Border, Margin

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Background Color, Image, Position, and Size	The CSS Box Model: Content, Padding, Border, Margin

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

The CSS Box Model: Content, Padding, Border, Margin

CSS Gradients: Linear and Radial Gradients

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

CSS Gradients: Linear and Radial Gradients

In CSS, this smooth blending of colors is called a Gradient.

Gradients give modern websites depth, energy, and premium visual appeal without requiring heavy Photoshop image files.

In this lesson, you will master:

1
Linear Gradients (colors transition in a straight line or angle)
2
Radial Gradients (colors radiate outward from a central point like circular ripples)
3
Color Stops and Modern Gradient Buttons

Real-Life Analogies: Sunset Skies & Rangoli Powders 🌈

To understand the difference between Linear and Radial gradients, remember these two everyday scenes:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE TWO TYPES OF CSS GRADIENTS                         |
+-------------------------------------------------------------------------+
| 1. LINEAR GRADIENT  --> THE SUNSET OVER THE CRICKET GROUND              |
|                         At 6:00 PM, the sky blends in a straight line:  |
|                         Golden Yellow at the horizon ──▶                |
|                         Rose Pink in the middle       ──▶                |
|                         Deep Twilight Navy at the top!                  |
|                                                                         |
| 2. RADIAL GRADIENT  --> DIWALI RANGOLI / WATER DROPLET RIPPLES          |
|                         Bright Yellow powder placed in the exact center,|
|                         radiating outward in circular rings of orange,  |
|                         and finishing with dark magenta on the rim!     |
+-------------------------------------------------------------------------+

Pro Tip

1. Linear Gradients (`linear-gradient`)

A Linear Gradient transitions colors in a straight direction: from top to bottom, left to right, or along any diagonal angle.

The Basic Syntax:

1.box {
2  background-image: linear-gradient(direction, color1, color2);
3}

1. Default Direction (Top to Bottom):

If you do not specify a direction, the browser automatically blends from top to bottom:

1.card {
2  background-image: linear-gradient(#3b82f6, #1e3a8a); /* Sky blue to navy */
3}

2. Changing Directions with Keywords:

You can use the to keyword to change the flow:

1/* Blends from left to right */
2.hero {
3  background-image: linear-gradient(to right, #ec4899, #8b5cf6);
4}
5 
6/* Blends diagonally to the bottom right corner */
7.badge {
8  background-image: linear-gradient(to bottom right, #f59e0b, #ef4444);
9}

3. Precise Angles (Using `deg`):

Instead of simple words, you can specify exact angles using degrees (deg):

             0deg (To Top)
                   ▲
                   │
  270deg ◀─────────┼─────────▶ 90deg (To Right)
(To Left)          │
                   ▼
           180deg (To Bottom)

Multi-Color Gradients and Color Stops

You are not limited to just two colors! You can blend 3, 4, 5, or more colors together:

1/* The Indian Sunset: 3 blended colors */
2.sunset-header {
3  background-image: linear-gradient(to right, #f97316, #ec4899, #6366f1);
4}

Controlling Where Colors Blend (Color Stops):

By default, the browser spaces out colors evenly. You can specify exact percentages to tell the browser where each color should begin and end:

custom-blend {
background-image: linear-gradient(
  to right,
  #2563eb 0%,   /* Blue starts at 0% */
  #38bdf8 60%,  /* Light blue reaches full strength at 60% */
  #10b981 100%  /* Emerald green finishes at 100% */
);
8}

2. Radial Gradients (`radial-gradient`)

A Radial Gradient starts at a single central point and expands outward in circular or elliptical rings, just like ripples when you toss a pebble into a calm pond!

Basic Syntax:

1.circle-card {
2  background-image: radial-gradient(shape at position, color1, color2);
3}

1. Simple Radial Gradient:

1/* Radiates from center outward */
2.glow-box {
3  background-image: radial-gradient(#60a5fa, #1e3a8a);
4}

2. Controlling Shape (`circle` vs `ellipse`):

By default, radial gradients adjust to the container's proportions as an ellipse (oval). You can force them to stay a perfect circle:

1.circular-glow {
2  background-image: radial-gradient(circle, #facc15, #ea580c);
3}

3. Changing the Center Origin:

You can move the radiant center to any corner or edge using at position:

1/* Light appears to shine from the top-left corner! */
2.spotlight-card {
3  background-image: radial-gradient(circle at top left, #38bdf8, #0f172a);
4}

Modern Gradient Buttons & Cards (Real Examples)

Here is how top software applications create stunning gradient buttons with hover effects:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Modern Gradient Showcase</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 24px;
    margin: 0;
  }
17 
  /* Gradient Card 1: Sunset Vibes */
  .card-sunset {
    width: 280px;
    padding: 30px;
    border-radius: 16px;
    background-image: linear-gradient(135deg, #f97316, #db2777);
    color: white;
    box-shadow: 0 10px 25px rgba(219, 39, 119, 0.4);
  }
27 
  /* Gradient Card 2: Deep Ocean */
  .card-ocean {
    width: 280px;
    padding: 30px;
    border-radius: 16px;
    background-image: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: white;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
  }
37 
  /* Gradient Pill Button */
  .gradient-btn {
    background-image: linear-gradient(to right, #8b5cf6, #ec4899);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    transition: transform 0.2s ease;
  }
51 
  .gradient-btn:hover {
    transform: scale(1.05); /* Slight pop effect */
  }
</style>
56</head>
57<body>
<div class="card-sunset">
  <h3>Design Mastery</h3>
  <p>Learn visual balance, color theory, and UI layout.</p>
  <button class="gradient-btn">Enroll Now</button>
</div>
63 
<div class="card-ocean">
  <h3>Frontend Engineering</h3>
  <p>Build blazing fast web applications with HTML5 & CSS.</p>
  <button class="gradient-btn">Start Free</button>
</div>
69</body>
70</html>

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
`background-color: linear-gradient(...)`	`background-image: linear-gradient(...)`	Gradients are treated as images in CSS, not solid colors.
Forgetting comma after direction: `linear-gradient(to right red blue)`	`linear-gradient(to right, red, blue)`	Comma is strictly required after the direction parameter.
Overusing 10 clashing colors.	Stick to 2 or 3 harmonious, analogous shades.	Too many random colors look like a messy tie-dye shirt!

Quick Revision Summary

A CSS Gradient is a smooth transition between two or more colors.
Gradients are rendered as images: always use background-image or background.
Linear Gradients flow along a straight direction (to right, to bottom, or degrees like 45deg).
Radial Gradients radiate from a center point in circular or elliptical rings.
Color stops allow you to dictate the exact percentage threshold where colors start and stop.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which CSS property should be used to apply a linear gradient background?

Question 2

What is the default direction of a linear-gradient if no direction or angle is specified?

Question 3

Which angle value in degrees creates a gradient that flows horizontally from left to right?

Question 4

How does a Radial Gradient differ visually from a Linear Gradient?

Question 5

In the rule linear-gradient(to right, crimson 0%, gold 50%, navy 100%), what does 50% represent?

Practice Challenge (Try It Yourself)

1
Open your code editor and create gradients.html.
2
Build 3 distinct gradient themes:

Theme 1 (Aurora / Northern Lights): Linear gradient from #10b981 (emerald) to #06b6d4 (cyan) to #3b82f6 (blue).
Theme 2 (Royal Sunset): Linear gradient angled at 45deg from #f97316 (warm orange) to #ec4899 (hot pink) to #8b5cf6 (purple).
Theme 3 (Spotlight Glow): Radial gradient with a circle at center from #fef08a (soft golden glow) to #0f172a (midnight slate).

1
Test your designs on 3 card boxes with white text.
2
Add a hover effect that slightly changes the box shadow to match the card's theme! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with The CSS Box Model: Content, Padding, Border, Margin (The CSS Box Model).

👉 Continue to Next Lesson: The CSS Box Model: Content, Padding, Border, Margin →

Next Lesson

The CSS Box Model: Content, Padding, Border, Margin

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Background Color, Image, Position, and Size	The CSS Box Model: Content, Padding, Border, Margin

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

CSS Gradients: Linear and Radial Gradients

Real-Life Analogies: Sunset Skies & Rangoli Powders 🌈

1. Linear Gradients (linear-gradient)

The Basic Syntax:

1. Default Direction (Top to Bottom):

2. Changing Directions with Keywords:

3. Precise Angles (Using deg):

Multi-Color Gradients and Color Stops

Controlling Where Colors Blend (Color Stops):

2. Radial Gradients (radial-gradient)

Basic Syntax:

1. Simple Radial Gradient:

2. Controlling Shape (circle vs ellipse):

3. Changing the Center Origin:

Modern Gradient Buttons & Cards (Real Examples)

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

The CSS Box Model: Content, Padding, Border, Margin

Related Lessons

Practice Quiz

Loading Page Content...

CSS Gradients: Linear and Radial Gradients

Real-Life Analogies: Sunset Skies & Rangoli Powders 🌈

1. Linear Gradients (linear-gradient)

The Basic Syntax:

1. Default Direction (Top to Bottom):

2. Changing Directions with Keywords:

3. Precise Angles (Using deg):

Multi-Color Gradients and Color Stops

Controlling Where Colors Blend (Color Stops):

2. Radial Gradients (radial-gradient)

Basic Syntax:

1. Simple Radial Gradient:

2. Controlling Shape (circle vs ellipse):

3. Changing the Center Origin:

Modern Gradient Buttons & Cards (Real Examples)

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

The CSS Box Model: Content, Padding, Border, Margin

Related Lessons

Practice Quiz

1. Linear Gradients (`linear-gradient`)

3. Precise Angles (Using `deg`):

2. Radial Gradients (`radial-gradient`)

2. Controlling Shape (`circle` vs `ellipse`):

1. Linear Gradients (`linear-gradient`)

3. Precise Angles (Using `deg`):

2. Radial Gradients (`radial-gradient`)

2. Controlling Shape (`circle` vs `ellipse`):