CSS Box Shadow Generator

This interactive tool helps you visually build CSS box-shadow properties and copy the generated CSS code for your web design projects. It’s ideal for designers and developers who want to quickly test and apply custom shadows to elements.

Step-by-Step Instructions:

1. Adjust the Shadow Settings

Use the sliders to set the values for your box shadow:

• Offset X (px): Moves the shadow horizontally.

  • Negative values shift the shadow to the left.

  • Positive values shift it to the right.

• Offset Y (px): Moves the shadow vertically.

  • Negative values shift the shadow up.

  • Positive values shift it down.

• Blur (px): Increases or decreases the blur radius of the shadow.

  • A higher value makes the shadow softer and more diffused.

  • A lower value makes the shadow sharp and crisp.

• Spread (px): Expands or shrinks the shadow size.

  • Positive values increase the shadow’s area.

  • Negative values reduce it.

2. Choose Shadow Colour

Select a colour for your box shadow using the colour picker. The shadow will update in real-time in the preview area.

3. (Optional) Add a CSS Class Name

Enter an optional class name (e.g., custom-shadow). This will be included in the generated CSS selector.
Note: The class name must only contain letters, numbers, dashes (-), or underscores (_), and must not exceed 30 characters.

4. Preview the Result

Below the form, the Preview Area shows how your current shadow settings will look on a sample box.

5. Generate the CSS

Click the “Generate CSS” button to create the code based on your settings. The output will appear in a formatted block below the preview area.

6. Copy the Code

Click “Copy CSS” to copy the generated code to your clipboard. A confirmation prompt will appear to ensure you approve copying.

Example Output:

If you use the default settings, the generated CSS might look like this:

.box-shadow-sample { box-shadow: 10px 10px 20px 5px #000000; }