← All Tools
🎨

Box Shadow Generator

Generate CSS box-shadow with live preview.

Features

  • Enjoy a real-time visual preview that instantly updates as you adjust shadow settings.
  • Customize horizontal and vertical offsets, blur radius, spread distance, and shadow color.
  • Toggle between outer drop shadows and inner inset shadows with a single click.
  • Stack multiple layers to create complex, realistic, and highly detailed shadow effects.
  • Copy the generated CSS code with one click for quick and seamless integration into your project.

How to Use

  1. Adjust the horizontal (X) and vertical (Y) offset sliders to position your shadow.
  2. Modify the blur radius to soften the shadow edges, and use the spread slider to expand or shrink it.
  3. Select your desired shadow color using the color picker tool.
  4. Check the 'Inset' box if you want the shadow to render inside the element.
  5. Click the 'Copy CSS' button to instantly copy the generated code snippet to your clipboard.

Frequently Asked Questions

What is a CSS box shadow?

A CSS box-shadow is a styling property that adds shadowing effects around an element's frame. It allows developers to create the illusion of depth, making elements appear raised or sunken into the page.

How do I create an inner shadow in CSS?

To create an inner shadow, you simply need to include the 'inset' keyword in your CSS box-shadow property. Our generator includes a simple toggle button that automatically adds this keyword to your generated code.

How do I add multiple box shadows to one element?

You can layer multiple shadows by separating each shadow definition with a comma inside the CSS property. Our tool allows you to stack and customize multiple layers visually before copying the complete code.

Why is my CSS box shadow not showing?

A box shadow might not show if the element has an overflow property set to hidden, or if the z-index of overlapping elements is hiding it. Additionally, setting the blur and spread to zero with a zero offset will make the shadow invisible.

What is the syntax for the CSS box-shadow property?

The standard syntax follows the order: offset-x, offset-y, blur-radius, spread-radius, and color. For example, 'box-shadow: 2px 4px 10px 0px rgba(0,0,0,0.5);' applies a semi-transparent, slightly blurred drop shadow.