Tailwind CSS Shadow Generator

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

Generate Perfect Tailwind CSS Box-Shadow Classes Visually

Shadows are one of those CSS properties that everyone uses but few people dial in perfectly on the first try. Too strong and the element looks like it is floating off the page in a 2005-era design. Too subtle and it disappears entirely. The Tailwind CSS Shadow Generator gives you a visual playground where you can adjust shadow parameters - offset, blur, spread, colour, opacity - and instantly see the result alongside the corresponding Tailwind utility class or custom CSS you need to reproduce it in your project.

Why Shadows Matter in Modern UI Design

Material Design popularised the concept of elevation - the idea that interactive elements like cards, buttons, and modals should appear to float above the background surface at varying heights, with shadows providing the visual cue. This principle has since spread far beyond Google's design system. Apple's Human Interface Guidelines, Microsoft's Fluent Design, and countless custom design systems all use shadow as a primary tool for establishing visual hierarchy.

A well-crafted shadow tells the user "this element is clickable" or "this content is grouped together" without requiring a border or background colour change. It creates depth on a flat screen, guiding the eye to what matters. Getting shadows right is not decorative flair - it is functional design.

How This Generator Works

The interface is split into two panels. On the left, you adjust shadow parameters using sliders and colour pickers:

Horizontal offset (X). Moves the shadow left or right. Positive values push it right; negative values push it left. Most UI shadows use a small positive X offset, or zero for a centred glow effect.

Vertical offset (Y). Moves the shadow up or down. Positive values push it downward, simulating light coming from above - which is the standard in most design systems because it matches our real-world expectation of overhead lighting.

Blur radius. Controls how soft or sharp the shadow edge is. A blur of zero produces a hard, crisp shadow. Higher values create a diffuse, ambient effect. Tailwind's default shadow utilities map to specific blur values, and the generator shows you which preset matches your current setting.

Spread radius. Expands or contracts the shadow relative to the element's dimensions. A positive spread makes the shadow larger than the element; a negative spread makes it smaller. Negative spread values are commonly used for tight, inset-looking shadows that add depth without adding visual weight.

Colour and opacity. Most UI shadows are black or very dark grey with reduced opacity - typically 10 to 25 percent. The generator lets you use any colour, which is useful for coloured shadows that match a brand palette or create a neon glow effect.

On the right panel, a live preview shows a card element with your shadow applied. Below it, you see the output in three formats: Tailwind utility class (if your shadow matches a built-in preset), Tailwind arbitrary value syntax like shadow-[0_4px_6px_rgba(0,0,0,0.1)], and raw CSS for non-Tailwind projects.

Tailwind's Built-In Shadow Scale

Tailwind CSS ships with a thoughtfully designed shadow scale: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl. Each step increases in offset, blur, and complexity - some even use multiple shadow layers for realism. The generator maps your custom values to the nearest Tailwind preset when a close match exists, saving you from writing arbitrary values when a utility class will do.

When your design calls for something outside the default scale - a deeper drop shadow for a hero card, a coloured glow behind a CTA button, or an inner shadow for an input field - the arbitrary value syntax gives you full control within the Tailwind ecosystem, keeping your styling consistent without ejecting to raw CSS.

Advanced Techniques

Layered shadows. The most realistic shadows use multiple layers: a tight, dark shadow close to the element plus a softer, wider shadow further away. This mimics how real-world objects cast both a sharp umbra and a diffuse penumbra. The generator supports multi-layer shadow composition, outputting the combined value in a single Tailwind class.

Coloured shadows. Instead of the standard grey, try using a slightly darker or more saturated version of the element's background colour. A blue card with a blue-tinted shadow looks more polished and cohesive than the same card with a generic grey shadow.

Hover elevation changes. Combine the generated shadow with Tailwind's hover: variant to create buttons and cards that appear to lift when the cursor moves over them. This is one of the simplest ways to add satisfying micro-interactions to a UI.

Built for Tailwind Developers, Useful for Everyone

While the primary output targets Tailwind CSS, the raw CSS output makes this shadow generator useful for any project - vanilla CSS, Bootstrap, Chakra UI, or styled-components. If you can paste a box-shadow value, you can use this tool.

Free, Browser-Based, No Dependencies

The Tailwind CSS Shadow Generator runs entirely in your browser. No npm install, no build step, no account. Adjust, preview, copy, paste - and ship beautiful shadows in seconds.