Backgrounds, Borders & Shadows — HTML & CSS Course

What you'll learn

A few properties do most of the heavy lifting in modern UI design: backgrounds, gradients, rounded corners, and shadows. Combine them and flat HTML transforms into cards, heroes, and buttons with real visual depth.

By the end you'll be able to:

Set background colours and images with proper sizing
Create linear and radial gradients
Round corners with border-radius
Add depth with box-shadow and control opacity

Backgrounds

background-color fills a box; background-image: url(...) places an image behind the content. The supporting properties control how that image fits — the most important being background-size: cover, which scales the image to fill the box (cropping the overflow), versus contain, which fits the whole image inside:

background.css

.hero {
  background-color: #0f172a;
  background-image: url("hero.jpg");
  background-size: cover;      /* fill the box, cropping if needed */
  background-position: center;
  background-repeat: no-repeat;
}

Tip

Always set a background-color as a fallback behind a background-image. If the image is slow or fails to load, the colour keeps your text readable instead of leaving it on a blank, possibly invisible background.

Gradients

Gradients are generated images, so they go in background. A linear-gradient() blends colours along a line (you can set the angle), and radial-gradient() blends outward from a point. They're resolution-independent and add richness with zero image files:

card.css

.card {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

card.html

Live preview

Gradient background, rounded corners, and a soft shadow — pure CSS.

Borders & radius

A border takes three parts: width, style, and colour — border: 2px solid #333. Style it per side if you like (border-bottom). border-radius rounds the corners; larger values are rounder, and border-radius: 50% turns a square into a perfect circle — the classic trick for round avatars.

Shadows & opacity

box-shadow takes an x-offset, y-offset, blur, optional spread, and colour: box-shadow: 0 10px 25px rgba(0,0,0,0.15). A subtle, slightly-downward shadow reads as gentle elevation — the effect behind almost every card UI. text-shadow works the same for text, and opacity (0 to 1) fades an entire element and its children.

Key idea

Great UI depth is subtle. Soft, low-opacity shadows offset slightly downward mimic real light and feel premium; harsh, dark, evenly-spread shadows look amateurish. When in doubt, use less blur and lower opacity than you think you need.

Recap & quick check

Key takeaways

background-color fills a box; background-image adds an image — use background-size: cover to fill it.
Always set a fallback background-color behind an image.
linear-gradient() and radial-gradient() create backgrounds with no image files.
border-radius rounds corners; 50% makes a circle. Borders are width + style + colour.
box-shadow (x, y, blur, spread, colour) adds depth — keep it soft and subtle.

Quick check

1. Which value makes a background image fill its box, cropping overflow?

2. How do you make a square element a perfect circle?

3. What creates a two-colour blended background with no image file?

4. In box-shadow: 0 10px 25px rgba(0,0,0,0.2), what is 25px?

5. What does opacity: 0.5 affect?

That completes Phase 3 — you can style beautiful, polished elements! Now for the part everyone wants to master: Phase 4 — Layout, starting with display and normal flow.