What does each box-shadow value control?

A box-shadow has offset-x, offset-y, blur, spread, and color. Offset values move the shadow horizontally and vertically. Blur softens the edge. Spread expands or shrinks the shadow area. Color defines the shadow tone and opacity.

When should I use inset shadows?

Use inset shadows when you want depth inside an element, such as pressed buttons, recessed cards, or input fields. Outset shadows are better for elevation effects where the element appears lifted from the page.

How can I keep shadows consistent across a design system?

Define a small shadow scale (for example, xs, sm, md, lg), then reuse those tokens across components. Consistent blur/spread relationships improve visual rhythm and make interfaces look intentional rather than random.

Do heavy shadows hurt performance?

Large, highly blurred shadows can increase paint cost on complex pages. Most modern UIs are fine with moderate use, but avoid excessive blur and stacking on mobile-heavy views. Test scroll and animation performance when using deep layered shadows.

Free tools

Free CSS Box Shadow Generator

Build custom box shadows with offset, blur, spread, color, opacity, and inset controls in one deterministic UI.

Copy-paste outputs

Win high-intent buyers from ChatGPT, Gemini, Claude, Perplexity, and AI Overviews before your competitors do.

One operating layer for monitoring, measurement, content action, and technical cleanup.

Start now See features

AI Visibility TrackingCompetitive RankingSentiment by ModelSource CitationsAI Overviews TrackingPrompt MonitoringAI Visibility TrackingCompetitive RankingSentiment by ModelSource CitationsAI Overviews TrackingPrompt Monitoring

Content GapsAI InsightsAdvanced AnalyticsData CopilotBlog GenerationUGC CampaignsLLM CouncilContent GapsAI InsightsAdvanced AnalyticsData CopilotBlog GenerationUGC CampaignsLLM Council

Shopping IntelligenceCrawler MonitoringGEO OptimizationMulti-Brand ManagementShopping IntelligenceCrawler MonitoringGEO OptimizationMulti-Brand Management

Tool 01

CSS Box Shadow Generator

Build custom box shadows with offset, blur, spread, color, opacity, and inset controls.

CSS Box Shadow Generator

Create box shadows with live preview and copy-ready CSS.

Offset X (0px)

Offset Y (14px)

Blur (28px)

Spread (-8px)

Opacity (25%)

Color

Inset shadow

box-shadow: 0px 14px 28px -8px rgba(15, 23, 42, 0.25);

Preview box

How it works

CSS Box Shadow Generator: methodology and worked example

How this tool computes its result

Composes a single CSS box-shadow value from six independent controls: offset-x and offset-y (-80 to 80px), blur (0-120px), spread (-80 to 80px), opacity (0-1), and a hex color, plus an inset toggle. hexToRgba() normalizes 3-digit hex to 6-digit, validates it against a strict 6-hex-digit pattern, and converts it to an rgba() string; any string that fails that pattern falls back to rgba(0,0,0,alpha) rather than erroring. The final rule is a straight template-literal concatenation: '{inset }{x}px {y}px {blur}px {spread}px {rgba}'.

Worked example

With the tool's default values — offsetX=0, offsetY=14, blur=28, spread=-8, opacity=0.25, color=#0f172a — hexToRgba decodes 0f/17/2a to r=15, g=23, b=42 and produces box-shadow: 0px 14px 28px -8px rgba(15, 23, 42, 0.25);

When not to use this tool

Only a single shadow layer is generated — there is no way to stack multiple comma-separated box-shadows (a common technique for layered elevation effects), so anyone needing a multi-layer shadow has to build it by hand from repeated exports of this tool.

Common mistakes

- Expecting multiple shadow layers in one output — the generator always emits exactly one box-shadow value, never a comma-separated stack.
- Assuming an invalid or partially-typed hex value will show an error — hexToRgba silently falls back to rgba(0,0,0,alpha) instead of surfacing a validation message.
- Forgetting the 'Inset' checkbox is off by default — a shadow meant to appear inside the element (e.g. a pressed-button effect) will render outside it until inset is explicitly toggled on.

Ready to dominate AI search visibility?

Track where your brand shows up in AI answers, close the content gaps that cost conversions, and stay visible across ChatGPT, Claude, Gemini, Perplexity, and Grok.

Start now