Box Shadow Generator
Stack shadows and generate CSS and Tailwind classes
Preview
Shadow layers
Selected layer
Layer 1box-shadow:
0px 1px 3px 0px rgb(0 0 0 / 0.08),
0px 1px 2px -1px rgb(0 0 0 / 0.06);What is Box Shadow Generator?
A tool for building CSS box shadows by stacking layers for cards, buttons, modals, and other UI surfaces. Set position, blur, spread, color, opacity, and inset for each layer, check the result in the preview, and copy the CSS or Tailwind class.
Layered shadows make it easier to create natural elevation with both close and distant shadows.
How to Use
- Choose a preset or add a layer.
- Select a layer and adjust its position, blur, color, and opacity.
- Change the preview shape and background to match your use case.
- Choose an output format and copy the CSS or Tailwind class.
Main Settings
Shadow Layers
A shadow is built from multiple layers. You can show or hide each layer, and duplicating a layer to change only a few values is useful for building a closely related stack.
Position and Blur
Horizontal and vertical offsets set the shadow position. Positive and negative values change the direction of the shadow. Blur controls how soft the edge looks, and spread controls the size of the shadow. Spread can be negative when you want a tighter shadow.
Color and Opacity
Shadow color and opacity are adjusted separately. You can reduce the strength of a shadow without changing its color. A colored shadow works well as an accent that blends with the surrounding UI.
Inset Shadow
Turn on "Inset shadow" to draw the shadow inside the element instead of outside it. This is useful for input fields and recessed panels. Because the setting is per layer, you can combine outer and inset shadows on the same element.
Presets
Six presets are available: Card, Popover, Modal, Natural, Inset, and Accent. Applying a preset replaces the layers, so adjust the values from there to finish the shadow.
Preview
You can choose between card, wide, button, and circle shapes. The background switches between light and dark, and the box color can be changed.
Use Cases
- Adding a natural lift to cards and panels
- Stacking close and distant shadows for modals and popovers
- Creating pressed or recessed effects for buttons and input fields
- Adding an accent that matches a brand color with a colored shadow
- Checking how a shadow looks in both light and dark themes
Things to Keep in Mind
- The preview background and box colors are not included in the generated CSS
Last updated:
