# CSS Box Shadow Generator - Layered box-shadow & text-shadow with Presets

> Free online CSS shadow generator for box-shadow and text-shadow: stack layers with offset, blur, spread and colour, start from presets, copy CSS or Tailwind.

- URL: https://qilingtools.com/en/css-shadow
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

Natural-looking shadows are usually layered — a wide, soft ambient shadow plus a tight one close to the element. This tool lets you build them the way a design app would: every layer has its own horizontal and vertical offset, blur radius, spread radius, color and opacity, and can be inset; layers can be toggled, duplicated, deleted and reordered. Change the preview background, element color, border radius and size to judge the shadow against your real palette, or switch to text-shadow mode to type your own text, set the font size and color, and create outlines, 3D lettering and neon glows. Presets cover the common cases: soft card shadows, smooth layered shadows, Material Design elevations from 1dp to 24dp, raised and pressed neumorphism, long shadows, hard offset (neo-brutalism) shadows, outer and inner glows, plus neon, 3D, outline, retro and long-shadow text. Output is standard CSS along with Tailwind shadow-[...] and [text-shadow:...] arbitrary value classes.

## How to use

1. Choose box-shadow or text-shadow, or click a preset
2. Add or select a layer and adjust offset, blur, spread, color and opacity
3. Tune the preview background and element, then copy the CSS or Tailwind class

## Features

- box-shadow and text-shadow modes
- Multiple layers: toggle, duplicate, delete, reorder
- Offset, blur, spread, color with opacity and inset
- Preview background, element color, radius, size and font size
- Material elevations, neumorphism, long shadow and neon presets
- CSS and Tailwind arbitrary value output
- Live preview that runs entirely in your browser

## FAQ

### What do the four box-shadow values mean?

In order they are the horizontal offset X, vertical offset Y, blur radius and spread radius. Positive X and Y move the shadow right and down, a larger blur gives softer edges, and a positive spread grows the shadow while a negative spread shrinks it — a negative spread with a large blur gives a soft shadow that appears only underneath. Adding inset turns it into an inner shadow.

### How do I make a neumorphism shadow?

Neumorphism needs the element and background to share the same color, plus two opposing shadows: a darker one to the bottom right and a lighter (often white) one to the top left, which makes the element look extruded. Make both inset for a pressed look. Click the neumorphism raised or pressed preset and adjust the colors from there.

### Does the order of shadow layers matter?

Yes. The first shadow in CSS is painted on top, so layers higher in the list sit above the others. Usually small, crisp shadows go first and large, soft ones last. Long shadows and 3D text are built from many layers offset one pixel at a time.

### How do I use the shadow in Tailwind CSS?

For box-shadow use the generated shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),...] class; for text-shadow use the arbitrary property [text-shadow:...]. Both work in Tailwind v3 and v4, and spaces are already converted to underscores.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.