ZenovayTools

CSS Box Shadow Generator

Design CSS box shadows with visual controls. Adjust offset, blur, spread, and color.

Shadow Layers

Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);

How to Use CSS Box Shadow Generator

  1. 1Adjust the horizontal and vertical offset sliders.
  2. 2Set the blur radius and spread to control the shadow shape.
  3. 3Choose a shadow color and opacity.
  4. 4Toggle the inset option for inner shadows.
  5. 5Copy the generated CSS box-shadow code.
Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

Related Tools

CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
CSS Grid GeneratorBuild CSS Grid layouts with a visual editor. Define columns, rows, gaps, and span cells across areas.

Frequently Asked Questions

How do box shadow values work?▾
Box shadow takes offset-x, offset-y, blur radius, spread radius, and color. Offset controls position, blur controls softness, and spread controls size. Negative spread makes the shadow smaller than the element.
Can I add multiple shadows?▾
Yes. Click "Add Shadow" to add additional shadow layers. Multiple shadows are common in modern design for creating depth and elevation effects.
What does the inset option do?▾
The inset keyword changes the shadow from an outer shadow (drop shadow) to an inner shadow. This creates a pressed or recessed appearance.
Can I control the shadow opacity?▾
Yes. Each shadow layer has an opacity slider (0-100%). The tool generates rgba() color values with the specified opacity.
Can I use this tool on my phone?▾
Yes, the box shadow generator works in any modern mobile browser. Adjust shadow parameters with sliders and copy the CSS on any device.
Does the generated CSS work with Tailwind CSS?▾
Yes. You can use the generated box-shadow value with Tailwind's arbitrary value syntax like shadow-[value] or define it as a custom shadow in your tailwind.config.js.
How many shadow layers can I add?▾
You can add multiple shadow layers to create complex depth effects. Each layer has independent controls for offset, blur, spread, color, opacity, and inset, allowing for realistic elevation designs.