Effective Shadow

The Problem with CSS Shadows

Most shadow implementations — including popular frameworks — share the same issues:

1. Single-layer shadows look flat. A shadow with one uniform blur doesn't match how light behaves in the real world.

2. Values are often arbitrary. Teams copy values from Stack Overflow or tweak numbers until "it looks okay". There's no underlying system.

3. box-shadow and drop-shadow don't match. They use different blur algorithms (box vs. Gaussian), so the same values produce different results. Most developers don't even know this.

4. Scaling is inconsistent. Going from "small" to "large" shadows often means arbitrary jumps rather than a harmonious progression.

Our Approach: Calculated, Not Guessed

Effective Shadow doesn't just provide presets — it's a calculation engine based on real principles:

Bézier-Curved Layer Distribution

Instead of linear steps, we use Bézier curves to distribute shadow layers. This creates the smooth falloff you see in natural shadows: sharper near the object, softer further away.

Layer 1: ░░░░░░░░░░  (subtle, close to element)
Layer 2: ░░░░░░░░    (medium distance)
Layer 3: ░░░░░░      (stronger)
Layer 4: ░░░░        (deepest, most diffuse)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Combined: Natural shadow with realistic depth

Harmonic Progression

Each elevation level follows a mathematical progression (~1.5-2× the previous), not arbitrary jumps:

| Level | Name | Offset | Blur | Layers | | ----- | -------- | ------ | ---- | ------ | | 1 | Subtle | 1px | 2px | 3 | | 2 | Low | 2px | 4px | 3 | | 3 | Raised | 3px | 6px | 4 | | 4 | Floating | 5px | 10px | 4 | | 5 | Overlay | 8px | 16px | 5 | | 6 | Modal | 14px | 28px | 6 | | 7 | Peak | 24px | 48px | 7 |

Calibrated Cross-Technique Output

box-shadow and filter: drop-shadow() render differently — box blur vs. Gaussian blur, linear vs. exponential stacking. We apply mathematically derived modifiers so both techniques produce consistent visual results from the same input parameters.

Use as Presets or as a Tool

Ready-to-Use Presets

npm install @effective/shadow

import "@effective/shadow/shadows.css"

<div className="shadow-4">Elevated card</div>
<img className="drop-shadow-4" src="icon.svg" />

Tailwind Plugin

// tailwind.config.js
import effectiveShadow from "@effective/shadow/tailwind"

export default {
  plugins: [effectiveShadow]
}

Build Your Own System

The real power is the calculation engine. Define your own elevation scale:

import { buildShadow, toBoxShadow, toDropShadow } from "@effective/shadow"

// Your custom configuration
const shadow = buildShadow({
  shadowLayers: 5,
  finalOffsetY: 12,
  finalBlur: 24,
  finalAlpha: 0.15,
  // Bézier curves for distribution
  offsetEasing: [0.4, 0, 0.2, 1],
  blurEasing: [0.4, 0, 0.2, 1],
  alphaEasing: [0.2, 0.5, 0.8, 0.5]
})

// Works for both shadow types
element.style.boxShadow = toBoxShadow(shadow)
element.style.filter = toDropShadow(shadow) // Automatically calibrated

→ Experiment in the interactive playground

Compared to Other Systems

We've analyzed the shadow implementations of major design systems:

| | Effective | Tailwind | Material 3 | Radix | | --------------------- | --------- | -------- | ---------- | ------ | | Layers | 3-7 | 1-2 | 3 | 1-2 | | Distribution | Bézier | Linear | Stepped | Linear | | Calculation basis | Formula | Manual | Spec-based | Manual | | Customizable | Full API | Config | Tokens | CSS |

→ Visual side-by-side comparison

Box Shadow vs Drop Shadow

Both have their place:

| | box-shadow | drop-shadow | | --------------------- | -------------------------- | --------------------------------------- | | Shape | Rectangular bounding box | Follows actual element contours | | Best for | Cards, buttons, containers | Icons, SVGs, transparent images | | Text shadows | Not applicable | Works on text glyphs directly | | Combined elements | Shadow around container | Unified shadow around all visible parts | | Performance | CPU-rendered | GPU-accelerated |

drop-shadow is particularly useful for text and icon+text combinations where you want a single unified shadow rather than a box around the container.

→ Interactive demo comparing both

Colored Shadows

Create eye-catching CTAs with colored shadows:

import { buildShadow, toBoxShadow } from "@effective/shadow"

const shadow = buildShadow({
  shadowLayers: 4,
  finalOffsetY: 12,
  finalBlur: 24,
  finalAlpha: 0.5
})

// Indigo glow effect
const ctaShadow = toBoxShadow(shadow, 3, { color: "99, 102, 241" })

Technical Foundation

The library is built on research from:

• Josh Comeau's shadow design principles
• Tobias Ahlin's layered shadow technique
• CSS-Tricks on shadow stacking behavior
• Bjango's cross-platform shadow matching
• Material Design 3 elevation principles
• Philipp Brumm's smooth shadow generator (concept inspiration)

Contributing

git clone https://github.com/sebastian-software/effective-shadow.git
cd effective-shadow
pnpm install
pnpm dev      # Start demo
pnpm test     # Run tests
pnpm build    # Build library

See CONTRIBUTING.md for guidelines.

License

Apache License 2.0 — Free for personal and commercial use.