CSS Shadow Generator (box-shadow, text-shadow)
Adjust layered box-shadow, inset shadows, text-shadow and drop-shadow filters with sliders, check them on a preview card and copy the CSS
Loading the tool…
Adjusts box-shadow, text-shadow and filter: drop-shadow() with sliders, stacks several shadow layers and gives you the CSS. Use it to settle the depth of a card or button, a pressed inset look or a text outline while watching a live preview.
How to use
- Under "Kind", choose box-shadow, text-shadow or filter: drop-shadow.
- In each layer under "Shadow layers", set "Offset X", "Offset Y", "Blur", "Spread" (box-shadow only), "Shadow color" and "Opacity". Switch on "Inset" for an inner shadow.
- Press "Add layer" or "Duplicate" for more layers and use the arrows to reorder them. Unticking a layer leaves it out for the moment.
- In the preview on the left, set "Background", "Card color", "Corner radius" and "Card size" to match your real screen.
- Pick a starting point under "Presets" if you like, then press "Copy" next to CSS.
How it works
- One box-shadow layer is written as "[inset] x y blur spread color". A positive spread grows the shadow, a negative one shrinks it. text-shadow has no spread and no inset.
- filter: drop-shadow() follows the visible shape (a PNG icon, an SVG) rather than the box, and several functions written one after another stack.
- Colors are written as HEX when opaque and as rgb(r g b / a) otherwise. A natural depth usually comes from two or three low-opacity layers with increasing blur.
- The layers and the preview settings are stored in this browser.
Questions and answers
- What is the order of the values in box-shadow?
- Offset X, offset Y, blur, spread, color, with inset placed first for an inner shadow. For example: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).
- How do I give a card a natural shadow?
- Stack two or three layers at 10 to 20 percent opacity and increase the vertical offset and blur step by step. The presets "Medium elevation" and "Soft, 5 layers" are built that way.
- Can text-shadow make a text outline?
- Yes. Four shadows with zero blur in the four directions (1px 1px, -1px -1px, 1px -1px, -1px 1px) form a thin outline. The "Text outline" preset does exactly that.
- What is the difference between box-shadow and the drop-shadow filter?
- box-shadow shadows the element's rectangular box; the drop-shadow filter shadows the visible shape. For icons or SVG on a transparent background, drop-shadow is the right one.