About the box shadow generator

What this is

Box Shadow Generator is a free, browser-based editor for the CSS box-shadow property. You drag a shadow, stack layers, preview the result on a light, dark, coloured or photographic canvas, and copy the code as CSS, SCSS, Tailwind or Stylus. There is no account, no sign-up and no server-side storage: your presets stay in your browser and every shadow is shareable as a URL. It is published by 365i, the trading name of BSolve IT Limited, a web hosting and web design company in Kettering, Northamptonshire, run by Mark McNeece since 2002.

Why it exists

The first version was a page on 365i.co.uk, written in 2025 because I was tired of hand-typing layered shadows into client stylesheets and wanted something that showed the shadow on a real box rather than in a screenshot. It found an audience: between May 2025 and February 2026 Search Console recorded 22,735 impressions and 265 clicks for that one page, about 3,000 impressions a month by the end, and it averaged position 8.4 for "box shadow generator". That is a lot for one page on a hosting company's site. When that site was rebuilt in early 2026 the page did not make the move, and in April it was marked as gone. That was a mistake, and the sensible fix was to give the tool a home of its own where it could be finished properly, with documentation and examples that stand on their own.

Two days after relaunch we tested it against twelve other free generators and the editor built into Chrome, rebuilt the same shadow in each and measured every page. The results, including where this one loses, are in Best CSS Box Shadow Generators: Free Tools Tested Side by Side on 365i Web Design.

The rebuild kept everything that made the old one useful and added what it lacked: layers you can reorder and hide, the whole state carried in the URL, a dark canvas that is a choice rather than a theme, undo and redo, full keyboard operation, and output that is identical whether you read it on the home page or on an example page.

How it is built

Plain PHP templates, one stylesheet of design tokens, and vanilla JavaScript written as ES modules with no framework and no build step beyond minification. The fonts are self-hosted and subset. The page holds itself to a Google PageSpeed score of 100 in all four categories on mobile and desktop, which is why nothing on it animates a box-shadow and why the preset backgrounds are compressed WebP files loaded only when a preset needs one. The colour system is measured in OKLCH and every text and background pairing is checked against WCAG 2.2 before it goes into the stylesheet.

The site itself uses the tool's output. Every raised surface here wears a layered, tinted shadow of the kind the generator produces, and the code blocks in the docs are the generator's real readout for the state they describe, produced by the same functions on the server. If a value on a docs page ever disagreed with what the tool printed, that would be a bug, and the way the site is built makes it hard to happen.

What it does not do

It does not generate text-shadow or filter: drop-shadow(); those follow glyphs and alpha channels rather than boxes, and a different tool is the right answer. It does not save anything to a server, so there are no accounts, no sharing between devices except by URL or exported file, and nothing to recover if a browser's storage is cleared. It does not export images. And it does not try to tell you whether a shadow is a good idea in your interface; the documentation gives the reasoning, and the decision is yours.

Changelog

2026-09-22, version 2.0

Relaunch on boxshadowgenerator.co.uk. Rewritten generator with reorderable layers, undo and redo, keyboard operation, URL state, corner resize grip, dark, colour and image canvases, 70 presets in five categories, saved presets with JSON import and export. Nine documentation guides and nine example pages.

2025, version 1

First release as a page on 365i.co.uk: live preview with a draggable handle, sliders, presets, CSS, SCSS, Tailwind and Stylus output, shareable URL. Dropped in that site's rebuild in February 2026 and marked 410 Gone in April 2026.