Design shadows for cards and dialogs
Tune offsets, blur, spread, and opacity against the preview to produce CSS for a UI element.
CSS Box Shadow Generator
CSS Box Shadow Generator
Build layered CSS box-shadow declarations by adjusting offsets, blur, spread, color, opacity, and inset shadows visually.
Key features
- Adjusts X and Y offsets from -100 to 100 px, blur from 0 to 200 px, and spread from -100 to 100 px.
- Converts a HEX color and 0–1 alpha value into rgba() output.
- Configures outer or inset shadows independently for each layer.
- Adds or removes layers and copies the comma-separated box-shadow declaration from a live preview.
How to use
- Adjust the first layer's offset, blur, spread, and color.
- Enable inset or add more shadow layers when needed.
- Inspect the preview and copy the generated CSS declaration.
Examples
Build depth with layered shadows
Combine multiple outer and inset layers and copy them as one box-shadow declaration.
Privacy
Shadow settings and CSS generation run in your browser.
Common questions
- Can I stack multiple shadows?
- Yes. Add layers and the tool combines their settings into one comma-separated box-shadow declaration.
- Can it create an inner shadow?
- Yes. Enable inset on any layer to configure an inner shadow independently of the outer layers.
Related tools
- Linear & Radial CSS Gradient GeneratorVisually edit linear or radial gradient direction, shape, color stops, and positions, then copy the background CSS.
- Color Picker | Extract Colors from Images and ScreenConvert HEX, RGB, and HSL values, then sample pixels from uploaded or pasted images or from the screen in supported browsers.
- CSS Cubic Bezier Easing GeneratorDrag two control points to create a cubic-bezier timing curve for CSS animations and transitions, then preview the motion.
- WCAG Color Contrast CheckerCalculate the WCAG 2.x contrast ratio between foreground and background HEX colors and test AA or AAA for normal and large text.