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.
CSS Scrollbar Generator
Customize Your Website's Scrollbars with Ease
CSV to Base64 Converter
Transform your CSV data into Base64 encoding quickly and easily
Text to Binary
Convert text to binary code effortlessly