CSS Box Shadow Generator
Design beautiful shadows and glassmorphism effects for your UI.
AdvertisementGoogle AdSense Partner
Ad Space Slot (horizontal)
Targeted ads will automatically appear here once AdSense ID is set
Settings
0px
10px
15px
-3px
0.1
Presets
Preview
Bg Color:
Preview Box
CSS Code
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);How to Use
- Use the sliders to adjust the horizontal offset, vertical offset, blur radius, and spread radius of your shadow.
- Select a shadow color and adjust the opacity for the desired intensity.
- Toggle "Inset Shadow" to make the shadow appear inside the element instead of outside.
- Toggle "Glassmorphism Mode" to generate modern frosted glass effects.
- You can also click on the "Presets" to quickly apply popular shadow designs.
- Once you are happy with the preview, click "Copy CSS" to grab the code for your project.