🌈 CSS linear-gradient() — Complete Tutorial

🌐 What Is linear-gradient()?

The linear-gradient() function creates a smooth transition between two or more colors along a straight line. It is commonly used for backgrounds, buttons, borders, overlays, and UI effects.

>>“Gradients turn simple UI elements into modern, visually stunning designs — all with pure CSS.”

Note

✔ No images required — gradients are generated by CSS
✔ Supports angles, directions, repeating patterns
✔ Can blend unlimited colors

📦 Syntax

Basic Syntax

linear-gradient(direction, color-stop1, color-stop2, ...);

A linear gradient is treated as an **image**, often used inside background.

📌 1. Basic Two-Color Gradient

Simple gradient

background: linear-gradient(red, blue);

Creates a top-to-bottom gradient from red → blue.

📌 2. Gradient Direction

✔ Using Keywords

Direction keywords

background: linear-gradient(to right, red, blue);

Directions include:to right, to left, to top, to bottom,to top right, to bottom left, etc.

✔ Using Degrees

Angle direction

background: linear-gradient(45deg, red, blue);

0deg = upward,
90deg = right,
180deg = down,
270deg = left.

📌 3. Multiple Color Stops

Multi-color gradient

background: linear-gradient(to right, red, orange, yellow, green);

Add as many colors as you want — CSS blends them smoothly.

📌 4. Custom Color Stop Positions

Custom stops

background: linear-gradient(
  to right,
  red 0%,
  yellow 40%,
  green 80%
);

You can control exactly where each color begins/ends.

📌 5. Transparent Gradients

Transparency example

background: linear-gradient(
  to bottom,
  rgba(0,0,0,0) 0%,
  rgba(0,0,0,0.7) 100%
);

Perfect for overlays on images.

📌 6. Gradient on Buttons

Button gradient

.btn {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

📌 7. Hard Stops (Sharp Transitions)

Hard stop gradient

background: linear-gradient(
  to right,
  red 0%,
  red 50%,
  blue 50%,
  blue 100%
);

Creates a sharp boundary between colors — no blending.

📌 8. Using linear-gradient() with Background Images

Overlay image

background: 
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('banner.jpg');

Common technique for darkening or coloring images for text readability.

📌 9. Repeating Linear Gradients

Repeating stripes

background: repeating-linear-gradient(
  to right,
  black 0,
  black 10px,
  yellow 10px,
  yellow 20px
);

Creates patterns like stripes or lined paper.

📌 10. Angled Background Sections

Diagonal background section

section {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

📌 11. Gradient Borders (Using Background Clip)

Gradient border

.gradient-border {
  border: 5px solid transparent;
  background: linear-gradient(to right, red, blue) border-box;
}

🧪 Real-World Examples

1️⃣ Card Gradient Background

Card UI

.card {
  padding: 20px;
  background: linear-gradient(to bottom right, #ff7e5f, #feb47b);
  border-radius: 12px;
}

2️⃣ Gradient Divider Line

Divider

.divider {
  height: 4px;
  background: linear-gradient(to right, transparent, #000, transparent);
}

3️⃣ Transparent Gradient Mask

Mask effect

.fade-bottom {
  background: linear-gradient(to top, white, transparent);
}

⚠️ Common Mistakes

  • ❌ Misunderstanding gradient angle direction
  • ❌ Forgetting that gradients are treated as images
  • ❌ Using too many color stops → muddy appearance
  • ❌ Adding a background color *after* gradient (overrides gradient)

Note

Always place gradients first if using multiple background layers.

🔥 Summary

The linear-gradient() function is a powerful CSS tool for creating smooth or sharp color transitions. It's widely used for modern UI design — from buttons to backgrounds, overlays, borders, and text effects.

>>“Gradients bring depth, style, and modern appeal to your UI — with just one line of CSS.”

Learn more →MDN Docs 📘