About Shadow Generator
CSS shadow generator visually creates box-shadow and text-shadow code, supports multi-layer shadows/blur radius/spread/color adjustment. Real-time preview, one-click shadow CSS generation.
How to Use
- Choose shadow type (box shadow/text shadow)
- Adjust offset/blur/spread/color
- Add multiple shadow layers
- Copy generated CSS code
Frequently Asked Questions
- What are the 4 box-shadow values?
- In order: X offset (horizontal), Y offset (vertical), blur radius, spread radius. E.g., '2px 2px 5px 0px rgba(0,0,0,0.3)' is bottom-right shadow with blur.
- How to make inner shadow?
- Add inset keyword before box-shadow values. E.g., 'inset 0 0 10px rgba(0,0,0,0.5)' creates inset effect, common for input focus state.
- What are multi-layer shadows for?
- Stacking multiple shadows creates more realistic depth. E.g., close dark small shadow + distant light large shadow simulates Material Design elevation.