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.