Generate custom CSS drop-shadow parameters and grab codes.
How to Use Box Shadow Generator
Drag the horizontal offset, vertical offset, blur, and spread sliders to shape the shadow.
Pick a shadow color and adjust its opacity slider.
Toggle "Inset Shadow" if you want an inner shadow instead of a drop shadow.
Copy the generated `box-shadow` CSS value from the output.
Key Features & Practical Use Cases
Adjusting X/Y offsets, blur radiuses, and spread parameters visually to create perfect CSS drop shadows.
Generating inset shadow codes for pressed button states or neumorphic UI designs.
Copying complex multi-layered shadow arrays directly into Tailwind config or CSS classes.
Frequently Asked Questions
What's the difference between blur and spread?
Blur softens/fades the shadow's edges outward; spread expands or contracts the shadow's size before blurring is applied - try both to see the visual difference live.
Can I preview the shadow on a realistic UI element?
Yes, the live preview panel shows your shadow applied to a sample card so you can judge it in context before copying the code.
Does it support multiple stacked shadows?
This tool generates one shadow layer at a time; for multiple stacked shadows, generate each one and combine the comma-separated values manually in your CSS.
About OneClickly
OneClickly offers 100+ premium online tools for PDF operations, image compression and conversion, text utilities, calculators, and developer tools. All tools run 100% in your browser - no file uploads, no data collection, maximum privacy guaranteed.