Skip to main content
NeatUtility

CSS Box Shadow & Drop Shadow Generator

Color & CSS100% Client-Side
Ready
TEXT
0 lines0 chars
0 B / 9.8 KB
About this tool, examples & FAQ

Construct layered CSS box-shadow elevations, transparent-contour drop-shadow filters, and Tailwind CSS arbitrary classes with real-time browser preview.

Key facts

Verified capabilities and limits of this utility
CSS specificationW3C CSS Backgrounds and Borders Level 3 & Filter Effects Level 1
Shadow modesOuter box-shadow, inset inner shadow, and filter: drop-shadow()
Tailwind CSS exportGenerates arbitrary utility classes (e.g. shadow-[0_10px_15px_-3px_rgba(...)])
Max input size10 KB
Execution deadline1 s
Processing locationBrowser-only: shadow parsing and generation executes in a local Web Worker

How to use

  1. Select an elevation preset (sm, md, lg, xl, 2xl, inner) or choose 'Custom'.
  2. Adjust X and Y offsets to position the simulated light angle.
  3. Fine-tune Blur Radius and Spread Radius to dial in elevation sharpness.
  4. Set the shadow color and opacity, and toggle 'Inset' for inner-recessed shadows.
  5. Choose export format: CSS Declarations, Tailwind CSS, or Shadow Model (JSON).

Example

Generate modern card elevation shadow

Input

0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)

Example output

/* CSS Box Shadow */
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);

/* CSS Filter Drop Shadow (for transparent PNGs and SVGs) */
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));

Edge cases

Filter drop-shadow spread omission

The CSS filter: drop-shadow() function does not support a spread parameter per W3C specification; spread radii are safely omitted when generating filter declarations.

Negative spread radius for soft elevation

Negative spread shrinks the shadow footprint, preventing harsh dark borders beneath floating cards and modals.

Multiple stacked shadow layers

Stacking multiple subtle shadow layers produces vastly more photorealistic ambient occlusion than a single high-opacity shadow.

How it works

  1. Parses pasted CSS box-shadow declarations or UI options into structured layer models.
  2. Calculates offset coordinates, blur radiuses, spread expansions, and color alphas.
  3. Generates both standard box-shadow properties and transparent-aware filter drop-shadow rules.
  4. Transforms spaces and commas to conform with Tailwind arbitrary value syntax.

Related workflows

Frequently asked questions

What is the difference between box-shadow and drop-shadow?

box-shadow creates a rectangular shadow around the element's box model, even if transparent. filter: drop-shadow() respects alpha channels and casts shadows around the visible outline of SVG and PNG graphics.

How do I apply this shadow in Tailwind CSS?

Select the Tailwind operation to export an arbitrary class like shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]. In Tailwind, underscores replace spaces in arbitrary values.

Is my shadow code processed locally?

Yes. All computation and parsing executes entirely client-side in a Web Worker without network requests.

References