Check icon
Copied to Clipboard!
Next-Gen App & Browser Testing Cloud
Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles
Drop Shadow Generator
Create CSS box-shadow styles with live preview controls for offset, blur, spread, color, opacity, and inset shadows.
AI Tools
Code Tidy
Data Format
Random Data
Security Tools
Utils
Write Tests in Plain English with KaneAI
Create, debug, and evolve tests using natural language.
Try for free
%
px
px
px
px
box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.35);What is a Drop Shadow Generator?
A drop shadow generator creates the CSS box-shadow declaration for an element and previews how the shadow will look before you use it in your stylesheet.
How to Use the Drop Shadow Generator?
- Choose the shadow color and opacity.
- Adjust horizontal offset, vertical offset, blur, spread, and inset until the preview matches your design.
- Copy or download the generated box-shadow CSS.
Did you find this page helpful?
Start your journey with TestMu AI
Get 100 minutes of automation test minutes FREE!!