OmniKit.tech Logo OmniKit.tech
EN
box-shadow-generator

CSS Box-Shadow Generator

Visual CSS box-shadow generator: multi-layer shadows, blur, spread, live preview, and CSS/Tailwind export.

Presets

Shadow Layers

Shift X 0px
Shift Y 4px
Blur 6px
Spread -1px
Shadow Color
#000000
Opacity 10%

Live Preview

Box
Canvas Background
Box Color
Radius 16px
CSS Code
Tailwind CSS Class

How It Works

1 Tune shadow layer parameters

Adjust horizontal and vertical offsets (X/Y), blur radius, spread distance, color, and opacity using intuitive visual sliders.

2 Add multiple layers & apply presets

Stack multiple shadows for realistic depth with "+ Add Layer" or pick professional presets like Soft, Float, Glow, or Inset.

3 Copy CSS rule or Tailwind class

Preview your shadow in real time against customizable backgrounds and copy ready-to-use CSS box-shadow code or Tailwind CSS classes in one click.

Frequently Asked Questions (FAQ)

Why use multi-layer shadows instead of a single shadow?
In natural lighting, shadows cast soft ambient diffusion alongside sharp contact edges. Combining two or more subtle layers produces realistic depth that a single CSS shadow cannot replicate.
How do I use the generated shadow in Tailwind CSS?
The tool automatically outputs an arbitrary value Tailwind utility class, such as class="shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]". Simply paste it directly into your HTML element's class attribute.
Are inset (inner) shadows supported?
Yes, you can toggle the Inset checkbox on any layer. You can also mix external and inset shadows together on the same element.

Related Tools