CSS Gradients

A gradient is a smooth change from one colour to another. In CSS, you create it with a function and use it as a background-image. You do not need an image file.

---

Linear gradient

.box { background-image: linear-gradient(to right, #ff9966, #ff5e62); }

The direction can be to right, to bottom (default), to bottom right or an angle like 45deg.

.a { background-image: linear-gradient(45deg, #36d1dc, #5b86e5); }
.b { background-image: linear-gradient(#f093fb, #f5576c 60%, #fccb90); }

You can give more than two colours, and add a percentage to say where each colour is placed.

---

Radial gradient

.circle { background-image: radial-gradient(circle, #fff176, #ff9800); }

---

Transparent gradient on an image

A gradient from transparent to dark can be placed over a photo to make the text readable.

.hero {
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)), url("photo.jpg");
  background-size: cover;
}

---

Summary

• Gradients are made with linear-gradient() and radial-gradient().
• Set them in background-image or background.
• Add colour stops with percentages to control where colours change.
• Next: CSS Borders.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.