Best CSS Box Shadow Generators:
Free Tools Tested Side by Side

Most CSS box shadows look fake for the same reason: they're one grey smudge. A real shadow has a tight, dark edge where the object meets the surface and a wide, faint falloff further out, and a single box-shadow layer can only do one of those. So the best CSS box shadow generator is the one that lets you stack layers, shows them on something like your actual page, and hands you code you'd commit without tidying it first.

I should know. We had one of these tools, it was doing nicely, and we deleted it.

The first version of our generator lived at 365i.co.uk/box-shadow-generator/. Between May 2025 and February 2026, Search Console logged 22,735 impressions and 265 clicks for that single page, and it averaged position 8.4 for "box shadow generator". February, its last full month, brought 3,017 impressions and 41 clicks. Then we rebuilt 365i.co.uk, the generator didn't make the move, and on 29 April 2026 the old URL was marked 410 Gone. That was a mistake, and an avoidable one. A page pulling three thousand impressions a month shouldn't vanish in a redesign unless somebody has decided it should.

So we rebuilt it properly, on its own domain. Box Shadow Generator went live on 22 September 2026, and the old 365i address forwards there in one hop. Two days later we rebuilt the same shadow in it, in twelve other free generators and in Chrome's own editor, and measured every page on one machine. Here's what we found, including where ours loses.

Quick verdict: the best box shadow generator for each job

For layered shadows built on real content and photos, then saved, shared or copied as Tailwind, the best free box shadow generator we tested is ours, and it's the only one with no ads, no consent banner and no third-party requests. It's our tool and our verdict, so check it against the numbers. For a whole elevation scale, use Josh W. Comeau's palette; for hover states and React or Vue, CodeFronts; for the lightest page, box-shadow.dev; for a shadow already on your live page, Chrome's built-in editor.

Four features turned up in none of the other twelve tools: photo backgrounds behind the preview, editable text inside the box, saving your own shadows, and importing or exporting them as a file. Page weight is Lighthouse's mobile transfer size, median of three runs; the full measurements are further down, along with four more tools we tested.

How we tested the box shadow generators

Every tool had to rebuild one reference shadow: four layers of the same blue-black (#1B2340) at rising distances and falling sharpness, on a 240 by 160 pixel white card with a 16 pixel radius, on a light background. It's the layered soft shadow example from our own gallery, and we picked it because it's the kind of shadow people actually want and single-layer tools can't make.

.card {
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(27, 35, 64, 0.06),
    0 4px 8px rgba(27, 35, 64, 0.06),
    0 12px 24px rgba(27, 35, 64, 0.08),
    0 32px 64px rgba(27, 35, 64, 0.12);
}

Each comma-separated entry is one shadow (offsets, blur, optional spread, colour, optional inset), and the first one listed is painted on top, as the W3C specification puts it. MDN's box-shadow reference and our guide to how box-shadow works cover the syntax properly. Why four layers is the interesting part, and Tobias Ahlin, a design engineer at GitHub, put it best in 2019:

"This simple layering technique gives us more control over the rendering of shadows, and with it we can fine-tune sharpness, distance, and spread."

Tobias Ahlin, Smoother & sharper shadows with layered box-shadows

Sharpness, distance and spread are three separate things a real shadow does at once, and one layer gives you one value for each. Small layers make the crisp contact edge; big ones make the soft fall. So the first question for any layered box shadow generator is whether it can stack at all; one that can't won't make this shadow, however nice its sliders are. Ahlin's other advice shows in the reference too: more layers means lower alpha on each, so no layer goes above 12%.

We've warned before about the "Top 10" trap, where a business ranks itself first on its own list. A roundup that includes our tool sits right in that trap, so we held ourselves to that piece's test (would you trust this page if you knew who published it?): a method written down first, measurements over opinions, and a "best for" per tool instead of a ranking. For each tool we recorded, on 24 September 2026:

1. Could it rebuild the reference? Through the tool's own controls, never by pasting CSS in.
2. How many inputs it took. Each value set or layer added counts as one. Inputs, not seconds, because the builds were driven through Chrome's DevTools protocol and a stopwatch would have timed the script.
3. What it can do: layers, inset, spread, colour, output formats, a share link tested in a fresh browser, saving, import and export, photo backgrounds, editable box text, keyboard use and a 390 pixel phone screen.
4. What it costs to load: Lighthouse 12.8.2 on its mobile preset in Chrome 153, three round-robin passes across every tool, median reported.

Lighthouse never clicks "accept" on a cookie banner, so ad-funded pages were measured at their best. The page weight section shows what one looked like in an ordinary browser.

The CSS box shadow generators, one by one

Ours comes first because it's the one you should be most suspicious of. After that the order isn't a ranking: each tool ends with a "best for", and the measured numbers sit beside every one.

Box Shadow Generator (boxshadowgenerator.co.uk), ours

We built this one. Same test, same tables, and the weaknesses are listed below.

It rebuilt the reference exactly in 15 inputs, or one click from the example page. You get up to twelve layers, each with offset, blur, spread, colour, opacity and an inset switch, plus undo, 70 presets and four output formats: CSS, SCSS, Stylus and Tailwind, which gives you a class and a Tailwind v4 @theme token (more in the Tailwind section).

Three things set it apart. First, you can put a photo behind the shadow: 50 built-in photographs across 52 presets, or paste any image URL. Glass cards only make sense over a picture, and a shadow tuned on white often falls apart on the hero image it's going to sit on. The card's text even switches between white and dark to suit the photo.

Second, you can edit what's inside the box. Double-click the card and type a heading, a paragraph or a list, so the shadow sits under real content. The editor strips anything unsafe: a <script> tag and a javascript: link both went when we tried them.

Third, nothing you make gets lost. Share link copies a URL carrying every layer, the card, the photo and the text, and it restored the lot in a clean browser. Saved shadows export as a box-shadows.json file and import on another machine; we tested the round trip.

The numbers: 99 for Lighthouse Performance, 100 for Accessibility, zero third-party requests, no cookies and no ads. It isn't the lightest page at 477 KB, because about 260 KB of that is the photo thumbnails.

Where it falls short. CodeFronts allows 20 layers to our 12, plus hover states and React and Vue output. Our Tailwind class line needs sideways scrolling, there's no Tailwind v3 config output, you can't upload a photo from your computer, and there's no padding or text-colour control. It doesn't do text-shadow or drop-shadow() either. The test also turned up four small bugs, now on our fix list.

Best for: building layered shadows on realistic content and backgrounds, then sharing or keeping them, with no ads in the way.

CodeFronts box shadow generator

Lighthouse 52 / a11y 831,334 KB17 third-party hostsAds and consent pop-up

CodeFronts is the closest thing to ours, and on raw features it beats us in places. It rebuilt the reference exactly in 20 inputs, allows 20 layers, has 20 presets including Material, Apple and Stripe, and it's the only tool here that designs a hover state. It exports CSS, SCSS, Tailwind, React and Vue, and its share link restored the shadow perfectly.

The cost is the page around it. Its consent pop-up lists "315 partners" and shows only Settings and Accept all at first, and 97 requests to 17 outside hosts had gone before we chose anything. Two ads stayed after we rejected consent. At 390 pixels the card you're editing is hidden, the Tailwind output is a class only, and there's no photo background, card text or saving.

Best for: hover-state shadows and React or Vue output, if you can live with the ads.

box-shadow.dev

Lighthouse 98 / a11y 9464 KB1 third-party hostNo ads

box-shadow.dev, an open-source tool from Two Beards, is the one I'd give a developer who only wants the code. It's the lightest page here (64 KB, six requests), it rebuilt the reference exactly in 23 inputs, and it was the only competitor that let us size the card to exactly 240 by 160. The colour field takes rgba() text, and each layer has an on-off switch.

It's deliberately bare. No presets, no share link, no saving, no Tailwind, and the code lives in a "Show code" pop-up on a single line.

Best for: a fast, ad-free multi-layer editor when all you need is the CSS.

Josh W. Comeau's Shadow Palette Generator

Lighthouse 51 / a11y 1001,186 KB1 third-party hostNo ads

Josh Comeau's palette generator isn't trying to do the same job, and it does its own job better than anything else here. You set a light position, "Oomph", "Crispy" and resolution, and it writes a whole set of elevations (low, medium, high) as CSS custom properties, all lit from one place. Its high level came within a whisker of our reference: offsets of 0.7, 5.5, 13.8 and 32.5 pixels against 1, 4, 12 and 32.

The trade-off is control: no typed shadow colour (it comes from the background), no inset, no share link, and custom properties only. The page is heavy at 1,186 KB, but that's the site's own code rather than ads, and it scored 100 for accessibility, the only tool besides ours to do so.

Best for: designing a consistent elevation scale for a whole design system in one go.

SmoothShadows, the smooth shadow generator

Lighthouse 99 / a11y 8173 KB1 third-party hostNo ads

If you've searched for Philipp Brumm's smooth shadow generator, shadows.brumm.af is now a parked domain with a consent banner claiming "1026 third parties". SmoothShadows, by Martti Laine, credits Brumm's tool and Tobias Ahlin's article as its inspiration, and it's the live successor.

Give it four numbers (layers, blur, opacity, distance) and it builds an eased stack: five inputs gave 0 2px 4px, 0 8px 16px, 0 18px 36px and 0 32px 64px, the outer layer matching our reference exactly. Its share link restored everything, and it can copy the result as a Figma layer, which nothing else here does. No inset, no spread, and you can't hand-tune single layers.

Best for: quick, smooth eased layers, especially if you hand off to Figma.

MDN box-shadow generator

Lighthouse 88 / a11y 91404 KB1 third-party hostMDN's own ads

MDN's generator is still live, and it's the only tool here that puts separate shadows on ::before and ::after. It got every value right, but in 30 inputs, because each new layer arrives with random values and goes to the front of the list, so the CSS comes out in reverse order.

There's no radius control, no presets, no share link and no copy button, and the add and reorder buttons can't be reached by keyboard. The page shows ads served through MDN's own domain.

Best for: experimenting with shadows on ::before and ::after.

CSS Portal box shadow generator

Lighthouse 83 / a11y 78756 KB7 third-party hostsAds inside the tool

CSS Portal ranks near the top for "best css box shadow generator" and builds layered shadows, with 21 presets. It rebuilt the reference exactly in 27 inputs, because every new layer arrives with random values, and colour is the browser picker only. The ads are the problem: one sits inside the generator's own panel, between the sliders and the box settings.

Best for: browsing a large preset list for ideas.

W3Schools box shadow generator

Lighthouse 60 / a11y 951,272 KB12 third-party hosts headless, 55 in a real sessionAds

W3Schools is fine for learning what each value does. It allows one shadow, and its "Layered" preset is, despite the name, a single shadow. "Copy link" copies the bare page address, so your settings don't travel. In an ordinary browser session it made over 1,000 requests to 55 outside hosts, mostly advertising and tracking.

Best for: a beginner seeing what offset, blur and spread do, one value at a time.

CSSmatic box shadow, and CSSmatic alternatives

Lighthouse 85 / a11y 95137 KB2 third-party hostsNo ads

If your CSSmatic bookmark now says "This Page Does Not Exist", the tool has moved to cssmatic.com/gen-box-shadow.html, though plenty of roundups still link the dead address. It's the cleanest single-layer tool here, with no ads and no banner, but it edits one shadow, and its output still adds -webkit- and -moz- lines no current browser needs.

For a CSSmatic box shadow alternative with layers: ours for Tailwind, photos and saving, CodeFronts for hover states, box-shadow.dev for the lightest page.

Best for: a single, clean shadow with no ads.

Neumorphism.io

Lighthouse 88 / a11y 85223 KB6 third-party hostsNo ads

Neumorphism.io, by Adam Giebl, is a good specialist. It always writes a dark shadow and a white highlight on opposite diagonals from one base colour, in flat, concave, convex and pressed shapes, so our reference was impossible by design. As a neumorphism box shadow generator it's the quickest route to the style; check contrast, because soft UI is low-contrast by nature. Our neumorphism example builds the same effect as editable layers.

Best for: soft UI in one colour.

Chrome DevTools box shadow editor (you already have one)

Every copy of Chrome has a box shadow editor built in. Google's documentation puts it plainly: "The Shadow Editor provides a GUI for changing text-shadow and box-shadow CSS declarations." Click the shadow icon beside a box-shadow value in the Styles pane and you get an Outset or Inset toggle, an offset pad, and blur and spread sliders, with one icon per layer.

It's the fastest way to adjust a shadow on the real page, with the real content, and there's no tab to switch to: the same inspect-and-adjust loop behind most CSS fixes, like our WordPress navigation block CSS fix. But new layers have to be typed, there are no presets, and nothing reaches your stylesheet unless you've set up Workspaces or overrides, as the Chrome DevTools CSS reference explains.

Best for: fine-tuning a shadow that's already on your live page.

Also tested: cssgenerator.org, html-css-js.com, Web Code Tools and CSS Scan

• cssgenerator.org: one shadow on a fixed teal box. Its "210 partners" consent pop-up closed itself before we chose anything, and a full-screen ad fired on our first click. Lighthouse 55.
• html-css-js.com: layers and a 16-effect gallery, but blur stops at 50 pixels, so our 64 pixel layer was impossible. The lowest Lighthouse score in the test, 41.
• Web Code Tools: an exact rebuild in 23 inputs, on a fixed grey box where a subtle shadow barely shows. It loads Microsoft Clarity session recording. Lighthouse 74.
• CSS Scan's box-shadow examples: a gallery of 95 credited shadows, not a generator, and a shop window for the paid CSS Scan extension. Example 43, credited to Tobias Ahlin, is closest to our reference.

Same layered box shadow, every generator

Here's what surprised me. Paste each tool's exported code onto an identical card and the exact tools are indistinguishable, because their output is identical: ours, CodeFronts, CSS Portal, box-shadow.dev and Web Code Tools wrote the same four layers. The single-layer tools lose the crisp contact line, Josh Comeau's black palette and the CSS Scan example read a shade heavier, and neumorphism.io paints something else entirely.

So once a generator can stack layers, the CSS is the CSS. What separates them is how many inputs it takes, what you can see the shadow against, whether you can keep and share it, and what the page does to you while you use it.

Box shadow generator page weight, ads and third-party requests

These are the Lighthouse figures behind the table above: mobile preset, three round-robin passes on 24 September 2026, median shown. Treat scores within about five points of each other as a tie.

Those are the flattering numbers, because Lighthouse never accepts a cookie banner. Here's cssgenerator.org loaded fresh in an ordinary Chrome window, cache disabled, nothing clicked:

That's 195 requests to 36 hosts and 2,970 kB for a tool whose job is to print one line of CSS, about 97% of it from other companies' servers. W3Schools passed 1,000 requests to 55 hosts in the same kind of session. None of that makes the shadows worse. It makes the pages slower, and it lets dozens of companies watch you use them.

Not every heavy page is an ad page: Josh Comeau's scores 51 with a single outside host, because the weight is its own JavaScript. And ours isn't the lightest, since about 260 KB of its 477 KB is photo thumbnails, the cost of a feature nobody else has.

Why we rebuilt our own box shadow generator

Partly the numbers: 3,000 impressions a month is traffic most small business sites would love, and we'd thrown it away. Mostly because useful free tools are the pages people come back to, the argument I made in our piece on adding real value to a website, and it seemed poor form to preach that and then 410 our own.

It got its own domain because a developer tool on a hosting company's site is the first page to go when that site is redesigned. It was. Now it has nine documentation guides and nine worked examples around it, and nothing competing for the navigation.

Build a realistic layered box shadow in boxshadowgenerator.co.uk, step by step

Here's how to build a realistic box shadow in CSS, the reference, from a blank start in about fifteen inputs. To skip to the end, the layered soft shadow example opens it in one click.

1. Set the offset. Drag the round handle on the card, or tab to it and use the arrow keys (Shift moves ten pixels, Home centres it). For light from directly above, keep the horizontal offset at zero and move it down.

   

2. Add a layer. The plus button under Layers adds one, deeper and softer than the last. Each numbered chip is a layer you can reorder, hide or duplicate.

   

3. Tune blur, spread and opacity. Small layers get small blur and low opacity; the big, far layer carries the most. Keep every layer under about 12% and let the stack do the work.

   

4. Add an inset layer if you need one. Switch Inset on and you get an inset box shadow, falling inside the card, which is how pressed buttons, wells and the lit edge on glass cards are made; the handle turns dashed. The inset shadows guide has the detail.

   

5. Check it on dark and on a photo. Switch the background to Dark and a soft shadow nearly disappears, which is the point of checking. Then try Image: pick a photo preset or paste a URL. My favourite preset is Coffee Break, an amber glass card over a coffee and croissant, with five layers and three of them inset.

   

   

6. Copy the Tailwind output (or CSS, SCSS or Stylus). The Tailwind tab gives you a class you can paste straight onto an element, and a v4 @theme token below it. Rename --shadow-custom to something your team will recognise before you commit it; the output formats guide explains each format.

   

7. Save it as a preset. Name it under My presets and press Save. Presets live in your browser, so use Export JSON to keep a copy or move them to another machine (the presets guide documents the file format).

   

8. Copy the share link. Press Share link and the whole shadow goes on your clipboard as a URL, ready for a ticket, a pull request or a designer. The share-by-URL guide explains how it's built.

   

Everything above also works from the keyboard, and the keyboard shortcuts page lists the lot, undo and redo included.

Box shadow in Tailwind CSS: utilities vs a v4 @theme token

Tailwind's built-in shadow-sm to shadow-2xl scale is fine for prototypes and wrong for a brand, because every one is pure black. An arbitrary value like shadow-[0_1px_2px_rgba(...)] covers a one-off; for anything you'll use twice, define a token. Tailwind's box-shadow docs put it simply: "Use the --shadow-* theme variables to customize the box shadow utilities in your project."

Here's the reference shadow as a Tailwind v4 token. We compiled this with Tailwind 4.3.3 before publishing, so it runs as written:

/* app.css */
@import "tailwindcss";

@theme {
  --shadow-soft:
    0 1px 2px rgba(27, 35, 64, 0.06),
    0 4px 8px rgba(27, 35, 64, 0.06),
    0 12px 24px rgba(27, 35, 64, 0.08),
    0 32px 64px rgba(27, 35, 64, 0.12);
}

<div class="rounded-2xl bg-white p-6 shadow-soft">
  Soft, layered, lit from above.
</div>

Two things in the compiled output are worth knowing. Tailwind wraps each layer's colour in var(--tw-shadow-color, ...), so adding shadow-indigo-900/20 recolours all four layers at once. And it composes the token with its ring variables, so shadow-soft ring-1 ring-black/5 gives you the shadow plus a hairline edge without one overwriting the other.

If you came looking for a Tailwind box shadow generator, only two tools in this test write Tailwind at all: ours, with the token above, and CodeFronts, with a class. If you aren't using Tailwind, or you want the same value available to plain CSS, a custom property does the same job, and Tailwind v4 can still reach it with the shadow-(--shadow-soft) shorthand:

:root {
  --shadow-soft:
    0 1px 2px rgba(27, 35, 64, 0.06),
    0 4px 8px rgba(27, 35, 64, 0.06),
    0 12px 24px rgba(27, 35, 64, 0.08),
    0 32px 64px rgba(27, 35, 64, 0.12);
}

.card {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

Our generator's Tailwind tab writes both the class and the @theme block for whatever you've built, and the output formats guide covers the v3 config route. Utility classes versus named tokens is the same trade-off behind Elementor's CSS-first V4 rebuild.

Building a shadow elevation scale for a design system

On client builds I define shadows once, as three to five levels, and no component is allowed to invent its own. The generator's own stylesheet is a public example: four levels tinted to one blue-black instead of pure black, every one with zero horizontal offset, and the hairline ring and lit top edge kept as separate tokens so they combine (prefix removed here):

:root {
  --ring:       0 0 0 1px #dde0e6;
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --shadow-1: 0 1px 2px rgba(27, 35, 64, 0.06),
              0 1px 1px rgba(27, 35, 64, 0.04);
  --shadow-2: 0 1px 2px rgba(27, 35, 64, 0.06),
              0 4px 12px rgba(27, 35, 64, 0.08);
  --shadow-3: 0 1px 1px rgba(27, 35, 64, 0.05),
              0 4px 8px rgba(27, 35, 64, 0.05),
              0 16px 40px rgba(27, 35, 64, 0.12);
  --shadow-4: 0 2px 4px rgba(27, 35, 64, 0.06),
              0 12px 24px rgba(27, 35, 64, 0.10),
              0 32px 80px rgba(27, 35, 64, 0.18);
}

/* 1 rests on the page, 2 is a card, 3 floats, 4 is a popover or modal */
.card { box-shadow: var(--ring), var(--edge-light), var(--shadow-2); }

The zero horizontal offset is deliberate. Josh W. Comeau puts the rule plainly in his essay on shadows:

"In general, we should decide on a single light source for all elements on the page."

Josh W. Comeau, Designing Beautiful Shadows in CSS

"In general" is honest; he isn't claiming a law. But when one card casts its shadow to the right and a dropdown casts one to the left, a page stops feeling like a surface and starts feeling like a collage, and most people can't say why. That's the best argument for tokens over one-off shadows, and no single-shadow generator can enforce it, ours included. You build each level in a tool; keeping them together is discipline. His palette is the one tool that tackles it head on, by building every level from one light position.

The counter-example is the site you're reading: four shadows lifted from Tailwind's defaults in pure black at 5 to 10% opacity, which is why cards here look faintly grey instead of lit. It's on my list. Fluid type is the other token set I define once per build, and the clamp generator on 365i.co.uk does for font sizes what a shadow generator does for depth. On Elementor sites the same thinking lives in the Variables Manager, covered in our look at Elementor 4.0 as a design system.

On a WordPress block theme, the scale belongs in theme.json. Shadow presets arrived in WordPress 6.3 and each one becomes a --wp--preset--shadow--{slug} custom property that the editor offers in its shadow picker:

{
  "version": 3,
  "settings": {
    "shadow": {
      "defaultPresets": false,
      "presets": [
        {
          "name": "Card",
          "slug": "card",
          "shadow": "0 1px 2px rgba(27, 35, 64, 0.06), 0 4px 12px rgba(27, 35, 64, 0.08)"
        }
      ]
    }
  }
}

If you'd rather have that set up for you on a WordPress build, Pressforge, our WordPress agency, and our web design service both do it.

box-shadow vs filter: drop-shadow(): which one you need

Every tool in this test makes box-shadow, and for cards, buttons and panels that's right. The box-shadow vs drop-shadow question comes up with a transparent PNG, an SVG icon or a logo, where box-shadow is wrong, and MDN's filter reference draws the line in one sentence:

"The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself."

MDN Web Docs, drop-shadow()

The key words are "the shape (alpha channel)". Give a transparent logo a box-shadow and you get a grey rectangle behind its bounding box, which looks like a mistake because it is one; drop-shadow() follows the visible pixels. The same MDN page notes it takes no inset keyword and no spread value, and you chain several functions rather than using commas, so a generator's inset and spread controls don't apply.

/* A card: the shadow follows the box */
.card {
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(27, 35, 64, 0.12);
}

/* A transparent PNG or SVG: the shadow follows the pixels */
.logo {
  filter: drop-shadow(0 8px 8px rgba(27, 35, 64, 0.18))
          drop-shadow(0 1px 1px rgba(27, 35, 64, 0.12));
}

Don't copy box-shadow numbers straight across, either. As Josh Comeau points out in the essay quoted above, drop-shadow() uses a different blurring algorithm, so the same blur value renders differently. Tune it by eye.

Box shadow performance: does it hurt Core Web Vitals?

Painted once, no. Shadows are drawn when the page renders, and a few dozen layered ones won't move a Core Web Vitals score. The generator proves it: its preview repaints up to twelve layers on every slider tick and still scores 99 on Lighthouse's mobile test.

Animating them is different. The web.dev guide to high-performance animations, by Kayce Basques and Rachel Andrew, notes that "anything that involves a blur (like a shadow, for example) takes longer to paint than drawing a red box." A transition: box-shadow repaints that blur on every frame, which on a grid of cards on a mid-range phone means a sluggish Interaction to Next Paint. Paint both shadows once and fade between them instead:

.card {
  position: relative;
  box-shadow: var(--shadow-2);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-4);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.card:hover::after {
  opacity: 1;
}

Opacity is handled by the compositor, so the hover costs almost nothing. The box shadow performance guide goes into blur cost and long lists, and the card hover example has both states ready to copy. If your site's scores have slipped for reasons that aren't shadows, that's what our speed optimisation work is for.

What box shadow generators can't do

A generator makes one shadow well. Most of what makes shadows look right across a whole site happens outside it.

• They can't pick your light source. Each shadow is built alone, so nothing stops a card lit from the left and a modal lit from the right. Josh Comeau's palette is the partial exception.
• They can't tell you whether a focus ring is visible. A box-shadow focus ring is a good technique, but whether it shows against your real backgrounds is your test to run under WCAG 2.2's Focus Visible criterion.
• They don't know about dark mode. A shadow tuned on white nearly vanishes on dark, as step 5 shows. Material Design's current guidance leans away from shadows for this kind of reason: "Instead of applying shadows by default to all levels, use shadows only when required to create additional protection against a background or to encourage interaction." On a dark theme, a lighter surface says "raised" better than a shadow can.
• They don't give you a system. Naming a value, deciding which level a component gets and stopping a sixth level appearing still falls to you. That's the elevation scale job, and it's much of the difference in what makes a website actually work.
• Most only write rgba(). Ours included. If your design tokens are in oklch(), you'll convert by hand.

Frequently asked questions about box shadow generators