CSS Shadows

What Are CSS Shadows?

CSS shadows are visual effects used to create depth around boxes or text. The most commonly used shadow properties are box-shadow and text-shadow.

.card {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

.heading {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

Shadows are useful for cards, modals, dropdowns, buttons, images, tooltips, navigation bars, and typography effects.

Why CSS Shadows Are Important

• Create depth and visual hierarchy.
• Separate elements from backgrounds.
• Make cards, modals, and dropdowns stand out.
• Improve button and focus feedback.
• Add polish to modern UI components.
• Help users understand layered interfaces.
• Support reusable design system elevation styles.

CSS Shadows Cheatsheet

The following table explains common CSS shadow patterns and their usage.

CSS box-shadow Syntax

The box-shadow property adds shadow around an element box.

selector {
  box-shadow: offset-x offset-y blur-radius spread-radius color;
}

Example:

.card {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

CSS text-shadow Syntax

The text-shadow property adds shadow to text.

selector {
  text-shadow: offset-x offset-y blur-radius color;
}

Example:

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

Text shadows are useful on hero images, banners, and headings, but they should not reduce readability.

Small, Medium, and Large Shadows

A design system usually defines a consistent shadow scale.

:root {
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}

.card {
  box-shadow: var(--shadow-md);
}

Using CSS variables keeps shadow usage consistent across the project.

Card Shadow Example

Card shadows help cards stand out from the page background.

.card {
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

Hover Shadow Example

Hover shadows can create a lift effect for cards and buttons.

.feature-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.14);
}

Pair hover effects with keyboard-friendly states like :focus-within.

Button Shadow Example

Button shadows can show depth, focus, and active interaction.

.button {
  background-color: #0d6efd;
  color: #ffffff;
  border: 1px solid #0d6efd;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(13, 110, 253, 0.25);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.button:hover,
.button:focus-visible {
  box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.35);
}

.button:active {
  transform: translateY(1px);
  box-shadow: none;
}

Inset Shadow Example

An inset shadow appears inside the element instead of outside it.

.input {
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

Inset shadows are useful for inputs, pressed buttons, panels, and inner depth effects.

Multiple CSS Shadows

You can apply multiple shadows by separating them with commas.

.modal {
  box-shadow:
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.08),
    0 1rem 3rem rgba(0, 0, 0, 0.18);
}

Multiple shadows can create more realistic elevation than one large shadow.

Glow Shadow Example

Glow effects use a shadow without strong offset.

.focus-ring {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.badge-live {
  box-shadow: 0 0 1rem rgba(25, 135, 84, 0.45);
}

Glow shadows are useful for focus rings, badges, status indicators, and active states.

Image Shadow Example

Shadows can make images feel more polished.

.article-image {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.14);
}

CSS Shadow Performance

Shadows are useful, but very large or frequently animated shadows can affect rendering performance, especially on low-powered devices.

• Use moderate blur values for common UI elements.
• Avoid animating large shadows on many elements at once.
• Use subtle shadows for repeated cards.
• Prefer transforming the element for movement instead of only animating shadows.
• Test heavy shadow effects on mobile devices.

CSS Shadows and Accessibility

• Do not rely only on shadows to show focus or state.
• Use strong visible focus indicators for keyboard users.
• Keep text shadows readable with sufficient contrast.
• Avoid shadows that make text blurry or hard to read.
• Ensure important UI boundaries are visible without subtle shadows.
• Use borders together with shadows when separation must be clear.

CSS Shadows and SEO

CSS shadows do not directly affect rankings, but they can improve page presentation, readability, visual hierarchy, trust, and user experience when used carefully.

• Clear card separation helps users scan content.
• Readable text shadows can improve hero section clarity.
• Good visual hierarchy supports content engagement.
• Performance-friendly shadows help pages feel responsive.
• Accessible focus shadows support keyboard navigation.

Common CSS Shadow Mistakes

• Using shadows that are too dark or unrealistic.
• Adding heavy shadows to every element.
• Animating large shadows on many cards.
• Using text shadows that reduce readability.
• Relying only on shadows for focus indicators.
• Not using a consistent shadow scale.
• Forgetting that shadows can be clipped by overflow: hidden.
• Using shadows without enough contrast between surfaces.

CSS Shadow Best Practices

• Use subtle shadows for everyday components.
• Use larger shadows only for modals, popovers, and floating panels.
• Create a consistent shadow scale with CSS variables.
• Use borders with shadows when separation must be clear.
• Use multiple shadows for realistic elevation.
• Keep text shadows minimal and readable.
• Avoid overusing glow effects.
• Test shadows on light mode, dark mode, mobile, and high contrast displays.

Key Takeaways

• box-shadow adds shadows around element boxes.
• text-shadow adds shadows to text.
• Shadow syntax includes X offset, Y offset, blur, spread, and color.
• Inset shadows appear inside the element.
• Multiple shadows can create realistic elevation.
• Consistent shadow scales improve design systems.
• Accessible shadows should support readability and visible focus states.