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.