Advanced Tailwind CSS Shadow Generator

How To Use Tailwind CSS Shadow Generator

1. Select Shadow Type:

• Choose between Outset and Inset shadows to determine whether the shadow appears outside or inside the element.

2. Adjust Shadow Properties:

• X Offset: Set the horizontal distance of the shadow (e.g., 4px).
• Y Offset: Set the vertical distance of the shadow (e.g., 2px).
• Blur Radius: Define how blurry the shadow appears (e.g., 15px).
• Spread Radius: Adjust the size of the shadow. Positive values make it larger, negative values make it smaller (e.g., 0px).

3. Set Color and Opacity:

• Choose the shadow color using the color picker or input the color manually.
• Adjust the opacity to make the shadow more transparent or opaque (e.g., 100%).

4. Use Presets:

• Select from predefined shadow sizes: Small, Medium, Large, Extra Large, 2XL, and Inner.

5. Preview and Copy:

• Preview: See how the shadow looks on a sample element.
• Output: Get the generated Tailwind CSS class (e.g., shadow-[4px_2px_15px_0px_rgb(226,3,3)]) and the corresponding CSS (box-shadow: 4px 2px 15px 0px rgb(226,3,3);).
• Copy Tailwind: Copy the Tailwind CSS class for use in your HTML.
• Copy CSS: Copy the CSS box-shadow property to use directly in your stylesheet.

Applying the Shadow

1. In HTML (Using Tailwind CSS):

Add the generated Tailwind CSS class to your element:

<div class="shadow-[4px_2px_15px_0px_rgb(226,3,3)]">Your content here</div>

2. In CSS (Using CSS Box-Shadow):

Add the generated box-shadow CSS to your element’s style:

.your-class {
  box-shadow: 4px 2px 15px 0px rgb(226,3,3);
}

This tool allows you to experiment with different shadow styles and quickly implement them into your projects for enhanced UI design.