Linear Gradients

linear-gradient() transitions colors in a straight line at any angle.

Example

.hero { background: linear-gradient(135deg, #667eea, #764ba2); }
.sunset { background: linear-gradient(to bottom, #f9a825, #e53935, #6a1b9a); }
.stripe { background: linear-gradient(90deg, #0d6efd 50%, transparent 50%); }

CSS

Full Editor

Pro Tip

Angle 0deg goes bottom to top; 90deg goes left to right; 135deg is diagonal.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned