How do Tailwind shadows work?

Tailwind provides shadow utilities like shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl. Each applies a predefined box-shadow CSS property. You can customize these in your tailwind.config.js.

Can I add colored shadows in Tailwind?

Yes! Use shadow-{color}-{shade} classes like shadow-indigo-500/50 to add colored shadows with opacity. Our generator helps you create custom colored shadows with visual controls.

What's the difference between shadow and drop-shadow?

box-shadow (Tailwind's shadow) creates a rectangular shadow behind the element's box. drop-shadow is a filter that follows the shape of the content, including transparent areas. Use drop-shadow for non-rectangular elements.

Shadow Generator

Tailwind Shadow Generator

Create custom box shadows with multiple layers and export to Tailwind CSS

Preview

Background

Box Color

Presets

CSS Output

1box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

Shadow Layers

Layer 1

Inset

X Offset: 0px

Y Offset: 4px

Blur: 6px

Spread: -1px

Color

Opacity: 10%

Layer 2

Inset

X Offset: 0px

Y Offset: 2px

Blur: 4px

Spread: -2px

Color

Opacity: 10%

Tailwind Config

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      boxShadow: {
6        'custom': '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)',
7      },
8    },
9  },
10}

Glassmorphism Generator

Create frosted glass effects

Neumorphism Generator

Build soft UI components

Tailwind Shadow Generator

Shadow Layers

You might also like

Glassmorphism Generator

Neumorphism Generator