What types of companies does UI Pirate work with?

UI Pirate works with SaaS startups, tech companies, and enterprise clients across USA, UK, Singapore, India, and Australia. Clients range from seed-stage startups to Fortune 500 companies in fintech, healthtech, legaltech, e-commerce, and AI.

How long does a typical project take at UI Pirate?

Landing pages and business websites typically take 2-4 weeks. SaaS and complex web applications take 1-2 months. Monthly retainers are also available for ongoing design and development support.

Does UI Pirate do design only, or development too?

UI Pirate provides end-to-end services — from product strategy and UX design to full frontend development in Angular, React, and Next.js. Designs can also be handed off to your existing development team.

What makes UI Pirate different from other design agencies?

UI Pirate combines product thinking with design and development — helping clients think through their product, plan its architecture, design the experience, and build it. We have shipped 50+ products with a 5.0 rating and specialize in complex enterprise applications.

How do I get started with UI Pirate?

Book a free 15-minute call at https://cal.com/ui-pirate/15min or email vishal@uipirate.com. You can also submit a project estimate at https://uipirate.com/contact.

What is UI Pirate's pricing?

UI Pirate offers pay-per-project, monthly retainers, and a 5-Day Pilot option to try the team risk-free. Landing pages start from $1,500 and SaaS products from $5,000. See detailed pricing at https://uipirate.com/pricing.

Does UI Pirate work with international clients?

Yes. UI Pirate serves clients primarily in USA, UK, Singapore, India, and Australia, but works globally. All collaboration is remote-first using Figma, Notion, Slack, and video calls.

What does negative spread do in a box-shadow?

Spread grows or shrinks the shadow's box before blurring. A small negative spread keeps large, soft shadows from reading as a blurry rectangle by pulling their edges in slightly first.

DESIGN SYSTEMS & CODE

Smooth Layered Box-Shadow Generator

Build realistic, non-muddy elevation shadows by stacking multiple layers that fade like real ambient light — then export a synchronized xs–2xl elevation scale.

3–6 Layer Shadow StackingPhysically-Inspired Easing CurvesSynchronized xs–2xl Elevation ScaleCSS Variables & Tailwind Export

Design SystemsNeed a full elevation system built for your product?Talk to design team

Elevation presets

Light / Shadow Angle: 180°

Layers: 4

Elevation Distance: 16px

Blur Intensity: 1.4×

Spread: -2px

Falloff Curve

Shadow Color

Opacity: 16%

Inset Shadow

Need a Custom Elevation System? →

Live Preview

box-shadow

2XL

:root {
  --shadow-xs: 0px 3px 4px 0px rgba(15, 23, 42, 0.108), 0px 5px 7px -1px rgba(15, 23, 42, 0.07), 0px 6px 8px -1px rgba(15, 23, 42, 0.048), 0px 6px 9px -1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0px 5px 6px -1px rgba(15, 23, 42, 0.108), 0px 8px 11px -1px rgba(15, 23, 42, 0.07), 0px 10px 14px -1px rgba(15, 23, 42, 0.048), 0px 10px 15px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0px 7px 10px -1px rgba(15, 23, 42, 0.108), 0px 12px 17px -1px rgba(15, 23, 42, 0.07), 0px 15px 21px -2px rgba(15, 23, 42, 0.048), 0px 16px 22px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0px 11px 16px -1px rgba(15, 23, 42, 0.108), 0px 19px 27px -2px rgba(15, 23, 42, 0.07), 0px 24px 34px -3px rgba(15, 23, 42, 0.048), 0px 26px 36px -3px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0px 17px 24px -2px rgba(15, 23, 42, 0.108), 0px 29px 40px -4px rgba(15, 23, 42, 0.07), 0px 36px 50px -4px rgba(15, 23, 42, 0.048), 0px 38px 54px -5px rgba(15, 23, 42, 0.04);
  --shadow-2xl: 0px 24px 33px -3px rgba(15, 23, 42, 0.108), 0px 41px 57px -5px rgba(15, 23, 42, 0.07), 0px 51px 71px -6px rgba(15, 23, 42, 0.048), 0px 54px 76px -7px rgba(15, 23, 42, 0.04);
}

Current box-shadow (single value)

Shadow & Elevation Guide

Why Layered Shadows Look More Realistic

A single CSS box-shadow has exactly one blur radius, so its edge fades at a constant rate — which reads as flat and slightly artificial. Real shadows don't fade evenly: light sources aren't points, so the soft edge (the penumbra) spreads and fades faster than the dark core (the umbra) grows. Stacking several shadow layers — each with a larger offset and blur but lower opacity than the last — approximates that natural falloff far better than any single blur value can.

Light / Shadow Angle

Controls the direction the shadow is cast, measured clockwise from the top: 0° casts the shadow straight up, 90° to the right, 180° straight down (the natural default for a card lit from above), and 270° to the left.

Layers & Elevation Distance

More layers produce a smoother gradient of blur and opacity — 3 layers reads as a clean UI shadow, 6 reads as a soft, photographic falloff. Distance sets how far the farthest, softest layer travels — effectively how "high" the element floats above the page.

Falloff Curve (Easing)

Linear spaces layers evenly. Smooth Diffusion pushes layers out quickly and lets the tail ease off gently — the most "ambient occlusion" looking option. Sharp Focus keeps early layers tight together for a crisp core, with one dramatic long layer at the end.

Blur Intensity, Spread & Opacity

Blur Intensity scales blur relative to each layer's offset — higher values look softer and more diffuse. Negative Spread pulls the shadow's edges in slightly, which keeps large shadows from looking like a blurry rectangle. Opacity sets how dark the closest, sharpest layer is; every layer after it fades further automatically.

How the xs–2xl Elevation Scale Is Derived

Rather than asking you to configure six shadows by hand, this tool treats your current settings as the MD baseline and scales the distance and spread up or down for each level — while keeping the same angle, color, layer count, and falloff curve. That's what keeps an entire elevation system looking like one consistent light source instead of six unrelated shadows.

XS = 0.4× distanceSM = 0.65× distanceMD = 1× distanceLG = 1.6× distanceXL = 2.4× distance2XL = 3.4× distance

Step-by-Step: How to Use This Generator

Start from a preset

Subtle Card, Raised Button, Modal / Dialog, and Dramatic Hero cover the most common elevation use cases — pick the closest one as a starting point.

Set your light direction and distance

180° (light from above) is the standard default. Increase Elevation Distance for elements that should feel like they're floating higher above the page.

Pick a falloff curve

Smooth Diffusion for soft, modern UI. Sharp Focus for a more dramatic, high-contrast shadow with a long soft tail.

Tune color and opacity to your background

Shadows on a colored or dark background often look better tinted (a dark navy instead of pure black) rather than just darkened.

Export the full scale

Copy the CSS custom properties or Tailwind boxShadow config — six synchronized tokens (xs through 2xl), ready to drop into your design system.

Frequently Asked Questions

Why not just use one box-shadow with a bigger blur?

A single blur value fades at a constant rate, which looks flat and can turn muddy at large sizes. Multiple layers with decreasing opacity mimic how real ambient light actually falls off — sharper near the object, softer and fainter further away.

Why is my shadow color a dark navy instead of black?

Pure black shadows can look harsh and disconnected from a colored background. A very dark, slightly saturated color (like #0F172A) tends to blend more naturally — most of the built-in presets use this instead of #000000.

What does negative spread do?

Spread grows or shrinks the shadow's box before blurring. A small negative spread (like -2px to -6px) keeps large, soft shadows from reading as a blurry rectangle by pulling their edges in slightly first.

How many layers should I use?

3–4 layers is plenty for small UI elements like buttons and cards. Reach for 5–6 layers on large, dramatic elevation — like a modal or a hero image — where the extra layers produce a noticeably smoother gradient.

Will this work with Tailwind's default shadow scale?

The exported boxShadow config adds new keys (xs, sm, md, lg, xl, 2xl) to your theme.extend.boxShadow, so it layers on top of Tailwind's defaults rather than replacing them — use shadow-md, shadow-lg, etc. as normal.

UI Pirate Ecosystem