CSS Box Shadow Generator

Create pixel-perfect CSS box shadows with our visual generator. Adjust offset, blur, spread, and color for multiple shadow layers, toggle inset shadows, browse presets, and get the equivalent Tailwind CSS classes. See every change reflected in a live preview before copying the code.

Features

• Control horizontal offset, vertical offset, blur radius, spread radius, and shadow color
• Add multiple shadow layers to create complex, realistic depth effects
• Inset shadow toggle for inner shadow effects
• Opacity slider for each shadow layer
• Curated presets ranging from subtle elevation to dramatic drop shadows
• Live preview on a customizable card element
• Generated CSS output ready to paste into your stylesheet
• Tailwind CSS equivalent classes shown alongside raw CSS

How to Use

1. Adjust the shadow sliders for horizontal offset, vertical offset, blur, and spread to shape your shadow.
2. Pick a shadow color using the color picker and set the desired opacity.
3. Toggle the inset checkbox if you want an inner shadow instead of an outer one.
4. Click "Add Layer" to stack additional shadows for more complex effects.
5. Browse the preset gallery for common shadow styles and use one as a starting point.
6. Review the live preview, then copy the CSS or Tailwind class from the output panel.

Use Cases

• Card Elevation: Apply layered shadows to cards and modals to create material-design-style elevation that communicates hierarchy.
• Button States: Define distinct shadow values for default, hover, and active states to give buttons tactile feedback.
• Navigation Bars: Add a subtle bottom shadow to fixed headers so they visually separate from the scrolling content beneath them.
• Image Frames: Wrap images in a container with a soft shadow to make them pop off the page without a hard border.
• Tailwind Projects: Generate the exact Tailwind shadow utility or arbitrary value syntax you need without memorizing class names.

FAQ

Why would I use multiple shadow layers?

Layering shadows produces more realistic depth than a single shadow. A common technique is pairing a tight, dark shadow close to the element with a larger, lighter shadow further away. This mimics how light and shadow behave in the physical world and creates a more polished appearance.

What is an inset shadow?

An inset shadow renders inside the element rather than outside it. It creates the visual impression that the element is pressed into the page, which is useful for input fields, toggle switches, or any pressed-state interaction.

How do I use the Tailwind CSS output?

The generator shows the closest built-in Tailwind shadow utility (e.g., shadow-lg) when one matches, or an arbitrary value class (e.g., shadow-[0_4px_12px_rgba(0,0,0,0.15)]) for custom values. Copy the class directly into your HTML element's className or class attribute.