Generate a consistent shadow elevation system (small, medium, large, xl) for a design system.
CSS Shadow Palette Generator produces a four-level box-shadow system named small, medium, large, and xl. It coordinates shadow geometry and visual weight across those levels so a design system can represent increasing elevation without accumulating unrelated one-off declarations. The names describe relative positions within this palette, not standardized or physical heights. Users are often surprised that an xl shadow can still appear subtle, or overly strong, depending on the background, element size, surrounding colors, and where the shadow is applied.
The palette contains four named elevation stops: small, medium, large, and xl. Each stop is represented by a CSS box-shadow value, whose visible result comes from horizontal and vertical offsets, blur radius, optional spread radius, and color. The useful output is the relationship among all four stops, not any single declaration viewed in isolation.
Read the set from small through xl as a progression of visual elevation. Assign the lower levels to surfaces needing slight separation and reserve the stronger levels for elements intended to appear farther above their surroundings. Keeping those assignments stable is what turns the generated declarations into a design-system palette rather than four interchangeable shadow effects.
No. These names are design-system tiers, not physical units or standardized elevation measurements. The same declaration can look stronger or weaker depending on surface color, shadow color, nearby content, and element dimensions. Treat xl as the top of this four-step palette, then inspect every level in the actual interface where it will appear.
Not necessarily. A shared palette improves consistency, but large cards, tiny controls, dark themes, and containers with clipped overflow can expose different visual or technical problems. Start with the generated token matching the intended elevation, then test it at the component's actual size and against its actual background. A component-specific exception may still be justified.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.