Box Shadow Generator Guide — How It Works, Tips & Benefits

A Bangalore freelancer recently rebuilt the dashboard for a Surat-based jewellery store and spent three hours fiddling with one CSS property: box-shadow. The client wanted the product cards to "float gently like the ones on Tanishq's website" — which is design-speak for a soft, layered drop shadow with about 12px of blur and 8% opacity. Without a visual editor, that's a guessing game of typing six numbers, refreshing, squinting, adjusting, refreshing again. With one, it's thirty seconds.

That's the gap the Box Shadow Generator on SabTools fills. You drag sliders for horizontal offset, vertical offset, blur radius, spread, and color; the preview updates live; you copy the generated CSS and paste it into your stylesheet or your Tailwind config. No login, no Figma plugin, no waiting for a design system meeting. This guide walks through what makes a good shadow, how to use the tool for the patterns Indian developers actually ship, and where shadows commonly go wrong on Razorpay-style payment UIs, Zomato-style product cards, and admin panels built for retail GST billing.

What the box-shadow property actually controls

CSS box-shadow takes up to six values in a specific order:

box-shadow: [inset] <x-offset> <y-offset> <blur> <spread> <color>;

• X-offset pushes the shadow horizontally. Positive moves it right, negative moves it left. For most UI elements, keep this at 0 — directional light from the side looks unnatural on flat screens.
• Y-offset pushes the shadow down (positive) or up (negative). This is where the "lift" comes from. Cards usually use 2–8px; modals use 20–40px.
• Blur radius controls softness. 0 is a hard edge (rare, usually a design mistake). 10–30px is the sweet spot for cards and buttons.
• Spread grows or shrinks the shadow before blur is applied. Negative spread is useful for inner-glow effects on inputs.
• Color — almost always an rgba() with low alpha (0.05 to 0.25). Pure black at full opacity is the classic beginner mistake that makes a page look like a 2009 PowerPoint slide.
• inset (optional keyword) flips the shadow inside the element — useful for pressed-button states or input field depth.

The generator exposes each of these as a slider plus a color picker, and previews the result on a sample card. Once it looks right, the tool outputs both vanilla CSS and a Tailwind-compatible shadow-[...] arbitrary value class, which matters because most modern Indian product teams — Cred, Zerodha Kite, Groww — ship Tailwind in production.

The four shadow recipes you'll actually use

Across 90% of UIs built for Indian audiences, four shadow patterns cover almost every need. Generate these once in the tool, save them to a snippets file, and reuse forever.

1. The subtle card lift

Used on dashboard widgets, product tiles, KYC step cards. Almost invisible until you turn it off:

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

Notice it's two stacked shadows separated by a comma — a tight inner shadow for definition and a wider outer one for ambience. This layered approach is what makes shadows on stripe.com or razorpay.com feel premium versus the flat single-shadow look of older Indian banking sites.

2. The hover lift

When a user hovers a clickable card — say a mutual fund tile in a Groww-style listing — the shadow grows and deepens. Pair this with a 2px translateY(-2px) transform:

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
transition: all 200ms ease;

3. The modal/dropdown

Heavy enough to separate from page content, soft enough not to feel cartoonish:

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

The negative spread (-12px) is what gives this its distinctive shape — the shadow is squeezed inward at the top, so it pools beneath the modal like a real object lit from above.

4. The inset input

For form fields on a GST invoice generator or loan application form, an inset shadow gives depth without a hard border:

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);

The generator's inset toggle handles this — flip it on, dial the y-offset to 1px, and you've got the same field treatment used on the Income Tax e-filing portal's form inputs.

Walking through a real Indian use case

Suppose you're building a landing page for a Pune chartered accountant's practice. The hero section shows three service cards: GST Filing, ITR Filing, and Audit. The CA wants them to feel "trustworthy and modern" — translation: white cards on a light grey background with shadows that don't scream for attention.

Here's the workflow in the generator:

1. Set x-offset to 0 and y-offset to 4. The light source is overhead.
2. Drag blur to 20. Soft, not crisp.
3. Leave spread at 0. You rarely need spread for cards.
4. Open the color picker, pick black, then drop the alpha to about 0.08. This is the single most important step — most beginners leave alpha at 1.0 and wonder why their shadows look harsh.
5. Copy the generated CSS: box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

If you want the cards to react on hover, generate a second, heavier shadow with y-offset 12, blur 32, alpha 0.12 — and apply it on :hover. The whole exercise takes under two minutes versus the 20 minutes you'd spend hand-tuning values in DevTools.

Common shadow mistakes on Indian websites

If you audit the top 50 Indian SME websites, the same five shadow mistakes show up over and over. The generator helps you avoid them, but only if you know what to look for.

• Pure black at full opacity. box-shadow: 5px 5px 0 black belongs on a 2010 retail flyer, not a 2026 fintech app. Always reduce alpha to between 0.05 and 0.25.
• Equal X and Y offsets. A shadow that sits diagonally below-right of an element implies light coming from the upper-left — which is physically correct but visually old-fashioned. Modern UIs use X=0 so shadows fall straight down.
• Forgetting border-radius. Sharp 90° corners on a card with a soft shadow look mismatched. If the shadow is soft (blur ≥ 12), pair it with at least border-radius: 8px.
• Shadow on a coloured background. A pure black shadow on a teal hero section turns muddy. Tint the shadow with the background hue — for a green hero, use rgba(20, 80, 50, 0.2). The generator's color picker accepts any hex, so you can experiment in real time.
• Stacking too many layers. Three or four comma-separated shadows is the maximum for performance — beyond that, you'll see jank on lower-end Android devices common in tier-2 cities where 60% of Indian internet users live.

Tailwind output, and why it matters

If your project uses Tailwind CSS (which most modern Indian startups do), the generator outputs an arbitrary-value class you can paste directly into JSX or HTML:

<div class="shadow-[0_4px_20px_rgba(0,0,0,0.08)]">
  Card content
</div>

For shadows you'll reuse, copy the value into your tailwind.config.js under theme.extend.boxShadow:

boxShadow: {
  'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
  'card-hover': '0 12px 32px rgba(0, 0, 0, 0.12)',
  'modal': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
}

Now you can write className="shadow-card hover:shadow-card-hover" across the project. This is the pattern used by every Indian SaaS team I've worked with — Khatabook, Vyapar, Bijak — because it keeps shadow tokens centralised and consistent.

Pairing shadows with other CSS effects

Shadows rarely live alone. The visual identity of a modern card or hero section comes from combining a shadow with a gradient background, a tinted border, or a glassmorphism blur. SabTools has companion tools for each of these layers:

• Use the CSS gradient generator to build the background for a hero section, then add a subtle shadow underneath for depth. A common pattern: a 135° gradient from #667eea to #764ba2 on a card with 0 20px 40px rgba(102, 126, 234, 0.3) — the shadow picks up the gradient's blue tint.
• The glassmorphism generator handles the frosted-glass effect made famous by macOS Big Sur and now common on Indian fintech apps like Jupiter and Fi Money. Glass cards still need shadows underneath to anchor them visually.
• For text-level depth — say a hero heading on a CA firm's landing page — pair box shadows on the container with the text shadow generator on the headline itself. Keep text shadows subtle (1–2px blur) to maintain readability.
• Get the shadow colour right by sampling from your brand palette using the color palette generator. A tinted shadow that matches your primary colour at 15% alpha always looks more intentional than generic black.

Performance: when shadows hurt scrolling

Box shadows are GPU-accelerated on modern browsers, but they're not free. On a long scrollable list — say 200 transactions in a UPI history view, or 500 products on a Surat textile wholesaler's catalogue — heavy shadows on every row will cause visible frame drops on a ₹12,000 Android phone with 3GB RAM (which is what most tier-2 city users carry).

Three practical rules:

1. Use single-layer shadows on list items. Save the fancy two-layer stacks for cards in the viewport's hero zone.
2. Avoid huge blur values on many elements. A 40px blur applied to 100 list items will tank your scroll FPS. Keep list-item blurs under 12px.
3. Test on a real low-end device. Chrome DevTools' CPU throttling at 4x slowdown approximates a budget Android. If shadows make scrolling stutter there, simplify them.

Accessibility: shadows are not borders

One subtle issue worth flagging: shadows alone don't satisfy WCAG contrast requirements. If you're using a faint shadow to separate a card from a white background, users with low vision or those on a glare-affected mobile screen (think: Delhi summer noon, outdoor delivery agent checking an order) may not see the card boundary at all.

The fix is either a 1px hairline border (border: 1px solid rgba(0,0,0,0.06)) underneath the shadow, or a slightly darker background colour for the page so the white card has a real contrast edge. The generator outputs CSS for the shadow only — pair it with one of these techniques whenever the shadow alpha is below 0.10.

Quick reference: shadow values for common UI patterns

Bookmark these. They cover almost every case you'll hit while building product UIs for Indian audiences:

• Pill button: 0 2px 4px rgba(0,0,0,0.06)
• Primary CTA (lifted): 0 4px 14px rgba(59,130,246,0.35) — tint to match button colour
• Default card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)
• Elevated card: 0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05)
• Modal/dialog: 0 25px 50px -12px rgba(0,0,0,0.25)
• Dropdown menu: 0 8px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.05)
• Floating action button: 0 6px 16px rgba(0,0,0,0.18)
• Tooltip: 0 4px 8px rgba(0,0,0,0.12)
• Input field (inset): inset 0 1px 2px rgba(0,0,0,0.06)
• Pressed button (inset): inset 0 2px 4px rgba(0,0,0,0.12)

Each of these can be regenerated and tweaked in the tool — start from the closest pattern, adjust the colour or offset to match your design, and copy the result.

From design file to production

Most Indian design handoffs happen in Figma, where shadows are defined as "Drop Shadow" effects with X, Y, Blur, Spread, and Colour fields — the same five values CSS uses. The generator becomes a translation layer: read the values from Figma's effect panel, plug them into the sliders, copy the CSS, paste into your component. The reason it's faster than typing the CSS by hand is the live preview catches Figma-vs-browser rendering differences immediately (Figma's shadow algorithm is slightly softer than CSS's by default, so a Figma blur of 20 often needs to be ~24 in CSS to match).

If you're building a design system from scratch — say for a Hyderabad-based logistics startup standardising its driver app, ops dashboard, and customer site — generate four to six shadow tokens once, add them to your Tailwind config or CSS variables, and never touch raw box-shadow values in component code again. That discipline is what separates UIs that age well from ones that need a rewrite every two years.

Open the Box Shadow Generator and start with the subtle card lift — drag the alpha to 0.08, copy the CSS, and see how much cleaner your next card looks. →