Why four formats
A box shadow is the same twenty characters wherever it ends up, but the file it ends up in has opinions. A plain stylesheet wants a declaration. A Sass project wants the value named. A Tailwind project wants it inside a class attribute, with the spaces turned into underscores. A Stylus project wants it with no punctuation at all. The readout on the generator writes all four from one state, so the choice is which tab to copy rather than what to retype. This page is about where each one goes.
Plain CSS
The CSS tab is the canonical output and the other three are derived from it. One layer is a single line; two or more layers are written one per line, indented, because a comma list of four shadows on one line is unreadable in a code review. Radius, background colour and backdrop blur are added only when they are set to something other than their defaults.
box-shadow:
0 1px 2px rgba(27, 35, 64, 0.06),
0 8px 24px rgba(27, 35, 64, 0.12);
border-radius: 12px;Paste it into a rule. Nothing about the value is special: no vendor prefixes, no fallbacks, because unprefixed box-shadow has worked everywhere since 2012 (see browser support). If the project uses custom properties, this is also the value to put in one; the tokens section below shows the shape I use.
SCSS: a shadow as a variable
The Sass documentation's opening line on variables is the whole reason this tab exists:
"Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself."
Sass documentation, Variables
A shadow is precisely the sort of value that should be referred to by name. Nobody remembers 0 8px 24px rgba(27, 35, 64, 0.12); everybody remembers $shadow-card. So the SCSS tab writes the value into a variable and then uses it, and the intended edit is to rename the variable to what the shadow is for:
$shadow-card:
0 1px 2px rgba(27, 35, 64, 0.06),
0 8px 24px rgba(27, 35, 64, 0.12);
.card {
box-shadow: $shadow-card;
border-radius: 12px;
}Put the variable in the project's settings partial with the other design tokens, not next to the rule that first used it. On this site every shadow lives in one token block at the top of the main stylesheet, alongside the colours and the type scale, and the component rules only ever reference names; the Sass equivalent is a _tokens.scss partial. That is what makes a redesign a one-file change.
Tailwind: arbitrary value or theme token
Tailwind gives you two routes and the readout writes both. The first is the arbitrary value, which the Tailwind docs describe plainly: use utilities like shadow-[<value>] "to set the box shadow based on a completely custom value". The catch is the encoding. A class name cannot contain spaces, so every space becomes an underscore, and the value must not contain spaces after commas either. The generator does that for you:
<div class="shadow-[0_1px_2px_rgba(27,35,64,0.06),_0_8px_24px_rgba(27,35,64,0.12)] rounded-[12px]"></div>That is fine for a one-off. For a shadow you will use twenty times, the docs point the other way: "Use the --shadow-* theme variables to customize the box shadow utilities in your project." In Tailwind v4 that is an @theme block in your CSS, and the readout writes one under the arbitrary value:
@theme {
--shadow-card: 0 1px 2px rgba(27, 35, 64, 0.06), 0 8px 24px rgba(27, 35, 64, 0.12);
}
/* then in markup */
<div class="shadow-card rounded-xl"></div>On Tailwind v3 the same thing goes in tailwind.config.js under theme.extend.boxShadow, with the same value as a string. Either way, rename custom to the shadow's job before you commit it. Tailwind's default scale (shadow-sm to shadow-2xl) is fine for prototypes; a product with its own light source deserves its own scale, and three named shadows are usually enough.
Stylus
Stylus describes itself as "expressive, dynamic, and robust CSS" whose "braces, semi-colons, and more can be omitted from your code to keep it clean and smaller", and the tab takes it at its word: a selector line, then the declaration with no colon and no semicolon, indented by two spaces.
.card
box-shadow 0 1px 2px rgba(27, 35, 64, 0.06), 0 8px 24px rgba(27, 35, 64, 0.12)
border-radius 12pxStylus also accepts the fully punctuated form, so if a codebase mixes styles the CSS tab pastes cleanly too. If you want the shadow as a Stylus variable, the pattern is shadow-card = 0 1px 2px ... at the top of the file and box-shadow shadow-card in the rule.
Radius, opacity and backdrop blur
The generator's box has a radius, an opacity and a backdrop blur because the preview needs them to look right, and the readout includes them only when they are doing something. A radius of zero is omitted. An opacity of 100 per cent is omitted; anything else is written as a background-color with alpha, because that is what you actually want in a stylesheet (an opacity property would fade the text too). A backdrop blur above zero is written as backdrop-filter. In Tailwind these become rounded-[12px], bg-[rgba(...)] and backdrop-blur-[12px] in the same class attribute.
A shadow scale as design tokens
Whatever the format, the shadow you copy should end up with a name and a place. The scale this site runs on is four levels plus a brand-tinted one for primary buttons, all declared once as custom properties and read everywhere else by name. Copying the shape is more useful than copying the values, so here it is in plain CSS, which every one of the four formats can express:
:root {
--shade: oklch(25% 0.05 268);
--shadow-1: 0 1px 2px oklch(from var(--shade) l c h / 0.06),
0 1px 1px oklch(from var(--shade) l c h / 0.04);
--shadow-2: 0 1px 2px oklch(from var(--shade) l c h / 0.06),
0 4px 12px oklch(from var(--shade) l c h / 0.08);
--shadow-3: 0 1px 1px oklch(from var(--shade) l c h / 0.05),
0 4px 8px oklch(from var(--shade) l c h / 0.05),
0 16px 40px oklch(from var(--shade) l c h / 0.12);
}
.card { box-shadow: var(--shadow-2); }
.modal { box-shadow: var(--shadow-3); }Level 1 rests, 2 lifts, 3 floats. Every component picks one and nothing invents its own, which is the discipline that keeps a site's shadows looking like they share a light. Build the levels in the generator, copy each one in whichever format the project speaks, and give them names before they leave the clipboard.
Frequently asked questions
How do I write a box shadow in Tailwind?
Use the arbitrary value syntax: shadow-[0_12px_24px_rgba(27,35,64,0.18)], with underscores in place of spaces and no spaces after commas. For a shadow you reuse, add it to your theme as --shadow-name in an @theme block (v4) or under theme.extend.boxShadow in tailwind.config.js (v3), then use shadow-name.
What is the difference between a Tailwind arbitrary value and a theme shadow?
An arbitrary value is a one-off written in the class name. A theme shadow is named once and reused everywhere as a short class, and it takes part in shadow colour utilities. Use arbitrary values while you are experimenting and promote the ones you keep to the theme.
Why does the SCSS output use a variable?
Because a shadow is a design decision, not a one-off value, and Sass variables exist to name decisions. Declaring $shadow-card once means every card on the site changes together when the design does.
Can I use CSS variables instead of SCSS?
Yes, and on a modern project you probably should. A custom property such as --shadow-2 can be declared on :root and read anywhere, changed per theme, and inspected in the browser. The SCSS output is for codebases that already run Sass.
Does the generator output rgba or hex with alpha?
rgba(). It is the one transparent colour syntax every browser back to 2012 understands, and it is what Tailwind's arbitrary values expect. Eight digit hex and rgb() with slash alpha both work in current browsers if you prefer them.
What does the Stylus output look like?
The same values with the colons, semicolons and braces removed: a selector line, then box-shadow followed by the value, indented. Stylus accepts the punctuated form too, so pasting the CSS tab into a .styl file also works.