CSS Box Shadow Generator
Color
Stack as many shadow layers as you want, tune offset, blur, spread, color, and inset per layer, and watch the preview update live. Six presets (Soft, Medium, Large, Neumorphism, Inset, Glow) jump-start common designs. Output copies both as a CSS rule and a Tailwind arbitrary-value class.
Presets
Shadow layers
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]
How to use
- Pick a preset or start from scratch.
- Tune each layer's offset, blur, spread, and color.
- Toggle inset for inner shadows.
- Copy the CSS rule or the Tailwind class.
Frequently asked questions
- What's the difference between blur and spread?
- Blur softens the shadow edge — the radius over which it fades to transparent. Spread expands or contracts the shadow shape itself before blurring (negative spread pulls it in).
- When should I stack multiple layers?
- Realistic shadows almost always need two: a tight, dark layer near the element + a wider, fainter layer further out. Compare Material Design or Tailwind's default shadows — they're all multi-layer.
- Why use rgba() instead of a HEX color?
- Box shadows look more natural with translucent colors that let the background tint through. rgba() lets you set the alpha directly.
- Why does Tailwind use underscores?
- Tailwind splits class strings by whitespace, so arbitrary values use underscores in place of spaces.
Related tools
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.