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
Stylus to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
Less to CSS Converter
Transform your Less code into CSS. Fast, easy, and secure.
CSS Minifier
Compress and optimize your CSS code with professional precision
Pace Converter
Easily convert running pace between different units and calculate estimated time and distance
SHA-512/256 Hash Calculator
Generate SHA-512/256 hashes quickly and easily
Discount Calculator
Calculate discounts, sale prices, and savings with our easy-to-use discount calculator.