CSS Shadow Generator for Website Cards

Shadows are hard to judge on a grey square. Here you tune a layered box-shadow and see it on a service card and a pricing card, on a light or dark page, with a keyboard focus ring you can test with Tab. Copy the CSS or the whole card component when it looks right. Everything runs in your browser. Nothing you type is sent to We.Inc or anyone else, and it is gone when you close the tab.

How it works

Start from a preset or adjust the first layer: horizontal and vertical offset, blur, spread, colour, opacity and inset.
Add up to five layers. Layered shadows (a tight one plus a wide soft one) look more natural than a single large shadow.
Switch the preview between a light and a dark page. Press Tab to move focus onto the card buttons and check the focus ring stays visible.
The checks warn when the shadow is too faint to see on the chosen background and when the card text falls below WCAG AA contrast.
Copy the box-shadow declaration, or the full card component with HTML and CSS.

Test shadows on the components you will ship

A shadow that looks right on a lone square can look heavy on a row of pricing cards or vanish under a photo. Previewing it on the cards a small business site actually uses, a service card with an icon and a highlighted pricing plan, shows the result you will get.

The component code includes a focus-visible outline, so the card stays usable with a keyboard whatever shadow you pick.

Tips

On dark backgrounds shadows almost disappear. Use a slightly lighter card colour or a thin border to separate the card instead.
Keep shadow colour tinted toward your background rather than pure black for a softer look.
Never rely on a shadow alone to show focus. Use a clear outline as well.
Large blur values are more expensive to draw. Avoid animating them on long lists.
Use one or two shadow levels across the whole site, so depth means something.

Frequently asked questions

How does the CSS box-shadow property work?

box-shadow takes a horizontal offset, a vertical offset, an optional blur radius, an optional spread and a colour, plus the inset keyword for inner shadows. Several shadows can be listed, separated by commas; the first one is drawn on top.

Why do layered shadows look better?

Real objects cast a sharp shadow close to them and a soft, wide one further away. Two or three layers with growing blur and falling opacity imitate that.

Why is my shadow invisible on a dark background?

A dark shadow on a dark page has almost no contrast. The tool warns you about this. Lift the card with a lighter surface colour or a subtle border instead.

Does box-shadow affect accessibility?

Shadows are decoration, so they do not need to meet contrast rules themselves. What matters is that text on the card stays readable and that focus is shown with a visible outline, not only a shadow change.

Is the CSS shadow generator free?

Yes, with no signup. Copy the code into any project.

Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $50 and Max at $99. See pricing.

More in Free Tools

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap