Tailwind Shadow Generator
Horizontal Offset
Vertical Offset
Blur Radius
Spread Radius
Tailwind version
Tailwind CSS Class (v3):
shadow-[0px_4px_6px_0px_rgba(0,_0,_0,_0.1)]
CSS Class:
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Tailwind CSS Pre Made Shadow
Looking for ideas? Check out these eye-catching Tailwind CSS shadow presets. Simply click "Copy Class" to use in your project instantly.
Soft Glow
Neon Dream
Dark Mode Elegance
Glassmorphism
Neumorphic Bliss
Vivid Pop
Subtle Depth
Cosmic Glow
Layered Dimension
Floating Element
Neon Outline
Soft Inner Glow
Retro Pixel
Dreamy Pastel
Cyberpunk Edge
Organic Soft
Minimalist Accent
Frosted Glass
Sci-Fi Hologram
Smoke Effect
Polaroid Frame
Soft Drop Shadow
Sharp Inner Shadow
Neon Glow
Layered Shadow
Harsh Side Shadow
Soft Glow
Inset Highlight
Floating Effect
Subtle Edge
Deep Press
Tool Introduction
Free Tailwind CSS box-shadow generator for Tailwind v3 and v4. Create custom shadows with sliders and a color picker, toggle inset for inner shadows, and switch between v3 and v4 output—v4 uses inset-shadow-[...] for inset and supports built-in presets. Copy the Tailwind class or raw CSS and paste into your project. No signup, all in the browser.
How to Use the Shadow Generator
- Choose Tailwind v3 or v4 in the version toggle for the correct class syntax.
- Adjust sliders for horizontal offset, vertical offset, blur radius, and spread radius.
- Use the color picker for shadow color and opacity.
- Turn on Inset for inner (inset) box shadows.
- Use Randomize to try new combinations; preview updates in real time.
- Copy the Tailwind class or CSS, then paste into your HTML or React components.
Benefits
- Supports Tailwind v3 and v4 with the right syntax (including v4 inset-shadow).
- Live preview and one-click copy for Tailwind class or CSS.
- Curated presets plus v4 built-in presets (shadow-sm, shadow-lg, etc.) when v4 is selected.
- No signup; runs in your browser. Free and private.
FAQs
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that allows you to build custom designs quickly by composing utility classes. It provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.
How do I use the generated Tailwind CSS shadow class?
Simply copy the generated class (e.g., 'shadow-[0px_5px_15px_rgba(0,0,0,0.1)]') and add it to your HTML element's class list. Tailwind CSS will apply the custom shadow based on this class.
Can I use this tool for projects not using Tailwind CSS?
While the tool generates Tailwind-specific classes, you can still use it to visualize and experiment with shadow effects. The shadow values can be adapted for use in standard CSS box-shadow properties.
Are the generated shadows responsive?
Yes, the shadows generated by this tool are responsive by default. Tailwind CSS applies the same shadow across all screen sizes unless you specify different classes for various breakpoints.
How can I create multiple shadows for a single element?
To apply multiple shadows, you can generate separate shadow classes and combine them in your HTML. For example: class="shadow-[0px_5px_15px_rgba(0,0,0,0.1)] shadow-[inset_0px_-5px_10px_rgba(0,0,0,0.05)]".
Is this tool compatible with Tailwind v3 and v4?
Yes. Use the version toggle to output Tailwind v3 or v4 syntax. For v4, inset shadows use inset-shadow-[...] instead of shadow-[inset_...]. When v4 is selected, you can also copy built-in presets like shadow-sm, shadow-lg, and inset-shadow-xs.