Dev Tools
Client-sidefiles never upload

box-shadow editor (multi-layer + Material elevation)

Visual multi-layer CSS shadow editor. Tweak x/y/blur/spread/colour/inset per layer. Built-in Tailwind 5 shadow presets and Material Design 9 elevation presets (each stacks three layers β€” umbra / penumbra / ambient).

Tailwind presets
Material elevation
Preview
Box colour
Background
Shadow layers (stack)
  • Layer 1
    Shadow colour (rgba supported)
  • Layer 2
    Shadow colour (rgba supported)
Output format
css
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
             0px 2px 4px -2px rgba(0, 0, 0, 0.1);
β€ΊHow to use
  1. Click a Tailwind preset (shadow-sm / md / lg / xl / 2xl) or a Material elevation (1 through 24, 9 levels) at the top.
  2. On the right tune box colour / background / corner radius so the preview matches your real-world context.
  3. Below, the layers section lets you stack any number of shadows. Each layer has x / y / blur / spread / colour / inset; βœ• removes a layer, + adds one.
  4. The output strip switches between CSS block, CSS value, and Tailwind v4 arbitrary class.
Tips
  • Multi-layer shadows are the modern look β€” stacking a soft + sharp layer reads much more naturally than a single shadow. Material's elevations use 3 stacked layers each (umbra / penumbra / ambient).
  • inset flips the shadow inward β€” great for neumorphism (we also ship a dedicated tool for that).
  • Tailwind v4 shadow-[...] accepts the full value verbatim β€” copy-paste and ship; no tailwind.config edits.
  • spread = 0 is dropped from the output to keep CSS tidy.

Related tools