Tailwind CSS Shadow Generator

Shadow Controls

Preview Background

Preview

Output

Choose a Shadow Type:

  • Select a pre-defined shadow from the Shadow Type dropdown (e.g., shadow-sm, shadow-lg).
  • To create a custom shadow, select Custom from the dropdown.

Adjust Custom Shadow Settings (only if Custom is selected):

  • X Offset: Move the slider to set the horizontal shadow offset.
  • Y Offset: Move the slider to set the vertical shadow offset.
  • Blur Radius: Adjust the slider to control the shadow blur.
  • Spread Radius: Use the slider to expand or contract the shadow size.
  • Color: Click the color picker to choose the shadow color.
  • Opacity: Adjust the slider to change the shadow’s transparency.

Preview the Shadow:

  • View the shadow effect on a sample box in the Preview section.
  • Change the preview background color by clicking on the color buttons (white, gray, black).

Copy Shadow Code:

  • Copy the generated Tailwind CSS class by clicking the Copy Tailwind button.
  • Copy the generated CSS rule by clicking the Copy CSS button.

Randomize or Reset Shadow:

  • Click Random to generate a random shadow configuration.
  • Click Reset to return all settings to their default values.