? CSS Text & Box Shadows

⚡ Quick Overview

CSS shadows are used to add depth, focus, and style to both text and box elements. With just a few values, you can make headings glow, cards float above the page, or buttons feel more clickable and modern.

In this topic, you’ll learn how to use:

text-shadow → for glowing, soft, or layered text effects.
box-shadow → for card, button, and container shadows (including inner inset shadows).

? Key Concepts

Horizontal offset (x) – moves the shadow left (negative) or right (positive).
Vertical offset (y) – moves the shadow up (negative) or down (positive).
Blur radius – how soft or sharp the shadow looks (0 = hard edge).
Spread radius (box-shadow only) – grows or shrinks the size of the shadow.
Color – plain color (e.g. #000) or smooth alpha color (e.g. rgba()).
Inset (box-shadow) – makes the shadow appear inside the element.
Multiple shadows – combine effects by separating shadows with commas.

? Syntax & Theory

text-shadow applies to text only, while box-shadow applies to any box element like <div>, <button>, or <section>.

? View Shadow Syntax

/* Basic syntax for text and box shadows */
text-shadow: horizontal-offset vertical-offset blur-radius color;
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Example with real values:

? View Basic Shadow Values

/* Simple dark shadow behind text */
text-shadow: 2px 2px 4px #000000;

/* Soft outer shadow around a card */
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);

? Code Examples

✨ Glowing Heading with text-shadow

? View Text Shadow Example

/* Neon-style glowing heading */
h1.glow-title {
  color: #ffffff;
  background-color: #111827;
  padding: 16px;
  text-align: center;
  text-shadow: 0 0 6px #22d3ee,
               0 0 12px #22d3ee,
               0 0 24px #22d3ee;
}

? Elevated Card with box-shadow

? View Box Shadow Card Example

/* Card with soft, modern shadow */
.card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

? Multiple Shadows for Layered Text

? View Multiple Text Shadows

/* Layered / retro-style text shadow */
.heading-multi {
  font-size: 2rem;
  text-shadow: 1px 1px 0 #000000,
               3px 3px 4px rgba(0, 0, 0, 0.4);
}

?️ Inset Shadow Inside a Box

? View Inset Box Shadow Example

/* Inner shadow to create pressed effect */
.box-inset {
  background-color: #e5f4ff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.2);
}

? Live Output & Explanation

Live Shadow Examples

Text Shadow Example

Here, the text looks slightly raised and clearer because of a soft dark shadow behind it.

Box Shadow Example

The box-shadow around this box gives it an elevated “card” look, as if it’s above the page.

Colored Text Shadow

By changing the color to a bright accent, the shadow adds a colorful, dramatic effect to the text.

Inset Box Shadow Example

With the inset keyword, the shadow moves inside the element, creating a pressed or sunken style.

? Tips & Best Practices

Prefer soft, blurred shadows for modern and clean UI designs.
Use rgba() colors for smoother blending, e.g. rgba(0, 0, 0, 0.25).
Combine shadows with :hover to make buttons and cards feel interactive.
Use inset with box-shadow to create inner depth, especially for input fields or panels.
Multiple shadows (comma-separated) let you build complex effects like neon glow or layered 3D text.
Keep shadows subtle on busy backgrounds so text remains readable.

? Try It Yourself

Create a main heading with a glowing blue text shadow that looks like neon signage.
Design a primary button whose box-shadow becomes stronger on :hover.
Build a card layout with 3 cards, each using slightly different shadow intensity.
Make a notification panel that uses an inset shadow to appear pressed into the page.
Experiment with multiple text shadows to create a colorful layered or “3D” effect.