Lesson 12 of 15
Backgrounds
CSS Backgrounds
Solid color:
background-color: #dbeafe;
/* or */
background: #dbeafe;
Linear gradient:
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, red, orange, yellow);
Radial gradient:
background: radial-gradient(circle, #f9a8d4, #c084fc);
Background image:
background-image: url("photo.jpg");
background-size: cover; /* cover | contain | 100px | 50% */
background-position: center;
background-repeat: no-repeat;
Shorthand:
background: url("photo.jpg") center/cover no-repeat;
Your Task
Create three elements with different background types: solid color, linear gradient, and radial gradient.
CSS preview loading...
Loading...
Click "Run" to execute your code.