Skip to main content

Shadows and CSS Filters: Complete Reference

Shadows and filters are the primary tools for adding depth, focus, and visual richness to elements — essential for premium UI design.

1. box-shadow — Element Shadow​

Casts a shadow around the element's box model.

/* Syntax: offset-x | offset-y | blur-radius | spread-radius | color */
.card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

/* Multiple shadows — comma separated, first is on top */
.card-layered {
  box-shadow:
    0 1px 3px  rgba(0,0,0,0.06),    /* Close, tight shadow */
    0 4px 12px rgba(0,0,0,0.12),    /* Medium shadow */
    0 8px 32px rgba(0,0,0,0.2);     /* Wide, diffuse shadow */
}

/* Inset shadow — inside the element */
.inset-well {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

/* Glow effect — using spread, no offset, colored shadow */
.glow-primary {
  box-shadow: 0 0 0 3px var(--color-primary),   /* Focus ring */
              0 0 20px rgba(108,99,255,0.4);      /* Glow */
}

Box Shadow Design System​

Build consistent shadow levels using CSS variables:

:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 60px rgba(0,0,0,0.5);
}

/* Dark theme colored shadows */
:root[data-theme="dark"] {
  --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
  --shadow-primary: 0 4px 20px rgba(108,99,255,0.35);
}

2. text-shadow — Text Shadow​

/* offset-x | offset-y | blur-radius | color */
.title-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* Glow effect on text */
.neon-text { text-shadow: 0 0 10px var(--color-primary), 0 0 30px var(--color-primary); }

/* Multiple shadows — embossed letter effect */
.emboss {
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.6),
   -1px -1px 0 rgba(0,0,0,0.3);
}

/* Knockout text on image */
.hero-title {
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

3. filter — Element Filters​

Apply graphical transformations to an element and all its children:

/* Individual filter functions */
.blur           { filter: blur(5px); }
.brightness     { filter: brightness(1.5); }   /* >1 bright, <1 dark */
.contrast       { filter: contrast(200%); }
.grayscale      { filter: grayscale(100%); }
.sepia          { filter: sepia(80%); }
.saturate       { filter: saturate(200%); }    /* >1 boost, <1 reduce */
.hue-rotate     { filter: hue-rotate(90deg); } /* Shift all colors 90° */
.invert         { filter: invert(100%); }        /* Negative */
.opacity-filter { filter: opacity(50%); }
.drop-shadow    { filter: drop-shadow(4px 8px 16px rgba(0,0,0,0.4)); }

/* Combine multiple filters */
.duotone-effect {
  filter: grayscale(100%) sepia(80%) hue-rotate(200deg) saturate(300%);
}

drop-shadow vs box-shadow​

filter: drop-shadow() follows the element's actual rendered shape (including transparent areas), while box-shadow follows the rectangular box:

/* box-shadow: square box around the PNG (includes transparent area) */
.icon { box-shadow: 4px 4px 8px rgba(0,0,0,0.5); }

/* drop-shadow: follows the actual icon shape */
.icon { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5)); }

Hover Filter Effects​

.card img { transition: filter 0.3s ease; }
.card:hover img { filter: brightness(1.1) saturate(1.2); }

/* Grayscale to color on hover */
.portfolio-item img { filter: grayscale(100%) brightness(0.9); }
.portfolio-item:hover img { filter: grayscale(0%) brightness(1); }

4. backdrop-filter​

Applies filter to the area behind the element. Requires a transparent or translucent background:

.glass-nav {
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* Safari */
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Frosted glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

Available backdrop-filter functions:

backdrop-filter:
  blur(Xpx)
  brightness(X)
  contrast(X%)
  grayscale(X%)
  hue-rotate(Xdeg)
  invert(X%)
  opacity(X%)
  saturate(X%)
  sepia(X%)
  drop-shadow(...)

5. CSS Filter Preset Recipes​

/* Warm photo tint */
.warm   { filter: sepia(30%) brightness(1.05) saturate(1.1); }

/* Cool/moody photo */
.cool   { filter: hue-rotate(200deg) saturate(0.8) brightness(0.9); }

/* Vintage film effect */
.vintage { filter: sepia(50%) brightness(1.1) contrast(0.85); }

/* High-tech monitor look */
.monitor { filter: brightness(1.2) contrast(1.1) saturate(1.3); }

/* Morning softness */
.soft    { filter: brightness(1.1) contrast(0.9) saturate(0.9); }