Backgrounds, Borders, Shadows

Add depth and personality with backgrounds, gradients, and shadows. Use the right tool — performance and aesthetics depend on the choice.

backgroundgradientshadowborder

Duration

⏱ About 1 hour

Level

📊 Beginner

Prerequisite

🎯 css-03

OUTCOME

Style hero sections and cards with confidence

What you'll learn

1Set background-color and background-image
2Create linear and radial gradients
3Combine multiple backgrounds in one rule
4Apply box-shadow and text-shadow tastefully

1. Backgrounds

css

.hero {
  background-color: #1e293b;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Shorthand: */
  background: #1e293b url("hero.jpg") center/cover no-repeat;
}

2. Gradients

css

.btn {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}
.radial {
  background: radial-gradient(circle at top right, #fbbf24, transparent);
}
.multi {
  /* layers from front to back */
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("banner.jpg") center/cover;
}

3. Shadows

css

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
}
.card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 12px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

💡

Stack two shadows — a tight one for the edge and a wide one for the glow — for that polished UI look.

4. Borders

css

.divider     { border-bottom: 1px solid #e5e7eb; }
.dashed      { border: 2px dashed #94a3b8; }
.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗