Backgrounds, Gradients, Shadows, and Filters

Introduction

Visual styling in CSS goes beyond layout and typography. Backgrounds, gradients, shadows, and filters help define hierarchy, depth, and tone. Used well, they improve readability and focus. Overused, they create noise and performance cost. This chapter teaches practical, production-friendly usage patterns.

Prerequisites

• Basic CSS syntax and selectors
• Box model and spacing fundamentals
• Responsive layout basics

Background Fundamentals

Common background properties:

• background-color
• background-image
• background-repeat
• background-position
• background-size

Example:

.hero {
  background-color: #0f172a;
  color: #e2e8f0;
}

Code explanation:

• background-color paints the element background area
• foreground text color is adjusted for contrast

Always verify text readability against background tones.

Background Images

.hero {
  background-image: url("/images/hero.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Code explanation:

• no-repeat prevents tiling
• center keeps focal area centered
• cover fills container while preserving image ratio (may crop edges)

Use background images for decorative visuals. Use <img> when content meaning and alt text are required.

Multiple Background Layers

CSS allows stacking multiple backgrounds:

.banner {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.6), rgba(2, 6, 23, 0.6)),
    url("/images/banner.jpg");
  background-size: cover;
  background-position: center;
}

Code explanation:

• first layer (gradient) sits on top
• second layer is the image
• overlay improves text contrast on photo backgrounds

This is a common hero pattern for readable headline text.

Linear Gradients

.cta {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

Code explanation:

• 135deg controls gradient direction
• color stops blend from blue to purple

You can also add explicit stop positions:

background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 60%, #a855f7 100%);

Useful for branded accents and section separators.

Radial and Conic Gradients (Brief)

Radial:

.spotlight {
  background: radial-gradient(circle at center, #1e293b, #020617);
}

Conic:

.chart-ring {
  background: conic-gradient(#22c55e 0 70%, #334155 70% 100%);
}

Use these carefully for decorative effects, badges, and data-like visual accents.

Box Shadows

box-shadow creates depth cues:

.card {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

Code explanation:

• 0: horizontal offset
• 10px: vertical offset
• 24px: blur radius
• color with alpha controls softness

Subtle shadows are usually better than dramatic ones in production UI.

Layered Shadows for Natural Depth

.panel {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 8px 20px rgba(15, 23, 42, 0.10);
}

Multiple lighter layers often look more natural than a single heavy shadow.

Text Shadows

.hero-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

Use text-shadow sparingly:

• helpful on image backgrounds
• often unnecessary on plain backgrounds

Excessive shadow reduces readability.

Border Radius and Visual Softness

Rounded corners are often paired with shadows:

.card {
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

Keep radius values consistent in a design token scale to avoid random visual language.

CSS Filter

filter applies visual effects to an element:

.thumb-muted {
  filter: grayscale(100%) brightness(0.9);
}

Common filter functions:

• blur()
• brightness()
• contrast()
• grayscale()
• saturate()
• drop-shadow()

Use filters intentionally; they can increase paint cost on large areas.

Backdrop Filter

backdrop-filter affects content behind an element (often glassmorphism style):

.frosted {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

Code explanation:

• semi-transparent background lets behind-content show through
• blur is applied to backdrop, not foreground text

Check browser support and contrast carefully before production use.

Performance Considerations

Potentially expensive effects:

• large blur shadows
• heavy filter chains
• big fixed backgrounds with layered gradients
• animated blur/filter values

Practical guidance:

• keep shadows subtle and limited in count
• avoid animating expensive visual effects on large surfaces
• test low-end devices and reduced motion contexts

Practical Pattern: Readable Hero Overlay

.hero {
  background-image:
    linear-gradient(to bottom, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.75)),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Why this works:

• image remains visible
• gradient darkens lower region for text readability
• no extra overlay DOM element needed

Practical Pattern: Interactive Card Elevation

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

This creates subtle feedback without heavy animation or visual noise.

Common Mistakes

Mini Exercise

1. Build a hero section with background image and readable gradient overlay
2. Style a card with subtle base shadow
3. Add hover elevation using transform + stronger shadow
4. Create a muted thumbnail variant using grayscale() filter
5. Compare readability/performance before and after effects

FAQ

Should I use background-image or <img>?

Use background-image for decoration. Use <img> for meaningful content that needs semantics and accessibility.

Why does background-size: cover crop my image?

Because it prioritizes filling the entire container while preserving aspect ratio.

Is box-shadow expensive?

Moderate use is fine, but very large blurred shadows on many elements can hurt performance.

When is backdrop-filter a bad idea?

When browser support, readability, or performance is uncertain. Always test fallback behavior.

How do I keep visual effects consistent?

Define design tokens for radius, elevation levels, and key gradient styles instead of ad-hoc values per component.