Backgrounds, Borders, and Visual Effects

Backgrounds and Gradients

Use gradients and images to add depth and style:

.card {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.hero {
  background-image: url("/hero.jpg");
  background-size: cover;
  background-position: center;
}

Borders and Radius

.panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.pill {
  border-radius: 999px;
}

Box Shadows

Shadows create hierarchy and depth:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

Background Shorthand

Combine everything in one line:

.banner {
  background: #111827 url("/stars.png") no-repeat center / cover;
}

Multiple Backgrounds & Overlays

Layer gradients over images for better contrast:

.hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2)),
    url("/hero.jpg") center / cover no-repeat;
}

Background Clip & Origin

Control where the background is painted:

.card {
  background-clip: padding-box; /* doesn't paint under border */
  background-origin: content-box; /* start from content area */
}

Filters & Backdrop Filters

Add polish with subtle blur or brightness:

.glass {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.5);
}

.image {
  filter: grayscale(30%) contrast(110%);
}