Nearby lessons
12 of 15CSS: Gradient (Linear & Radial)
📌 What are CSS Gradients?
CSS gradients let you create smooth transitions between two or more specified colors without using images. There are mainly two types: linear-gradient and radial-gradient. You can control direction, color stops, and even create repeating patterns.
1️⃣ Linear Gradient – Top to Bottom
A basic linear-gradient transitions colors vertically from top to bottom by default.
Example02
2️⃣ Linear Gradient – Directions
Use to right, to left, to top, to bottom right, etc., to control the direction of the gradient.
Example03
3️⃣ Linear Gradient with Angle
You can specify angles (e.g., -45deg) to create diagonal gradients.
Example04
4️⃣ Radial Gradient – Default
A radial-gradient radiates colors from the center outward in a circular or elliptical shape.
Example05
5️⃣ Radial Gradient with Color Stops
You can define color stops with percentage values to control where colors start and end.
Example06
6️⃣ Repeating Radial Gradient
Use repeating-radial-gradient to create repeated circular gradient patterns.
Example07
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3