Gradients & Shadows

A linear gradient blends two or more colors in a straight line. You choose direction (to right, 45deg) and color stops.

Linear Gradients

A linear gradient blends two or more colors in a straight line. You choose direction (to right, 45deg) and color stops.

Real-life example: A linear gradient is like a sunset sky — orange slowly changing to purple from left to right.

Linear gradient

.hero {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  color: white;
  padding: 3rem 1.5rem;
}

.subtle-bg {
  background: linear-gradient(to bottom, #f8fafc, #ecfeff);
}

Radial & Conic Gradients

Radial gradients spread from a center point like a ripple. Conic gradients go around a circle like a color wheel or pie chart.

Real-life example: Radial is like a torch light on a wall — bright in center, darker outside. Conic is like a pizza cut into colored slices in a circle.

Radial and conic

.spotlight {
  background: radial-gradient(circle at top, #fef3c7, #f8fafc 60%);
}

.color-wheel {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #ef4444);
}

Box Shadow

box-shadow adds depth behind an element. Values: horizontal offset, vertical offset, blur, spread, and color. Multiple shadows can stack.

Real-life example: box-shadow is like a soft shadow of a book on a table — makes the book look lifted.

Box shadows

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.08);
}

.card:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.elevated {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.1);
}

Text Shadow & Advanced Tips

text-shadow adds depth to letters. Combine gradients with semi-transparent overlays for modern hero sections. Use color-mix() in modern browsers to blend colors cleanly.

Real-life example: text-shadow on white text over a photo is like a thin dark outline so letters stay readable on a busy background.

Heavy shadows on many elements can slow painting on old phones — use shadows on cards and modals, not every small tag.

Text shadow and layered backgrounds

.hero-title {
  color: white;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-overlay {
  background:
    linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
    url("photo.jpg") center / cover no-repeat;
}