background — fill the element's box
background-color fills the box. background-image uses an image. background gradient blends colors.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
background-color is a flat color. background-image: url(...) tiles an image. linear-gradient(angle, color1, color2) blends two colors at an angle. The angle is degrees: 0deg = up, 90deg = right, 135deg = down-right (the diagonal).
✏️ Try these changes
-
Change 135deg to 0deg→ gradient goes bottom-to-top -
Change 135deg to 90deg→ gradient goes left-to-right -
Change #58a6ff to #f85149→ second color becomes red -
Replace the whole background with: background: #f5f5f5;→ flat grey background