box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
How It Works
Adjust Sliders
Use the controls to set offset, blur, spread, color, and opacity for each shadow layer.
Preview in Real Time
See your shadow update instantly on the preview box as you make changes.
Copy the CSS
Click Copy to get the complete CSS box-shadow property ready to paste into your stylesheet.
Frequently Asked Questions
What is CSS box-shadow?
What is an inset shadow?
Can I add multiple shadows?
What is neumorphism?
Does box-shadow affect layout?
About Box Shadow
What this tool does
Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.
Why use this tool
Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.
How it works
Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.
Pro tip
Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.
Explore More
Love this tool? Explore 12467+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools