Create Beautiful CSS Box Shadows Effortlessly
Generate stunning box shadows with our intuitive interface. Copy the CSS code and use it in your projects instantly.
Preview
Box Shadow
Customize me
CSS Output
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
Shadow Controls
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
Soft Shadow
Medium Shadow
Heavy Shadow
Inner Shadow
Sharp Diagonal
Outline Glow
Double Shadow
Lifted Effect
How to Use
Basic Controls
- Adjust theHorizontal Offsetto move the shadow left or right
- Adjust theVertical Offsetto move the shadow up or down
- Increase theBlur Radiusto make the shadow softer
- Use Spread Radiusto increase or decrease the overall size of the shadow
- Change theColor and Opacityto customize the shadow appearance
Advanced Features
- Enable Inset Shadowto create an inner shadow effect
- Use Multiple Shadowsfor more complex effects
- Save and loadPresetsfor quick access to your favorite shadows
- Click Random Shadowfor inspiration
- Copy the generated CSS code and paste it into your project
Related Tools
Less to CSS Converter
Transform your Less code into CSS. Fast, easy, and secure.
Sass to CSS Converter
Transform your Sass code into CSS. Fast, easy, and secure.
Stylus to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
MD4 Hash Generator
Generate MD4 hashes quickly and easily
Pantone to HSV
Convert Pantone colors to HSV values for precise color control
HEX to CMYK
Convert HEX color codes to CMYK for print applications