Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

CSS Box Shadow Generator

Design CSS box shadows visually: layer several shadows, drag sliders for offset, blur, spread, color and opacity, toggle inset, preview the result live and copy the generated CSS. Includes presets from subtle elevation to hard drop shadows.

Everything runs locally in your browser. Your data never leaves your device.

Preview

16 px
240 px
150 px

Drag the card around the surface to judge the shadow against different edges. Double-click the card to recenter it.

Layers

2 of 12

Paste an existing value to replace the stack and edit it layer by layer.

px
px
px
px
10%

Presets

Starting points worth stealing. Loading a preset replaces the current layers.

CSS output

box-shadow:
  0 4px 6px -1px #0000001a,
  0 2px 4px -2px #0000001a;
Single line
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
Tailwind classarbitrary value
shadow-[0_4px_6px_-1px_#0000001a,0_2px_4px_-2px_#0000001a]

Next steps

Keep going. These tools open with your result loaded in.

Text Case Converter

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more, each with its own copy button.

textconverter

Word & Character Counter

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

text

Dedupe Lines

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

textdev

Find and Replace

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

devuuid

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

Scientific Notation Converter

Convert between scientific notation and full numbers as you type. Reads 1.23e5, 1.23 × 10^5 and plain numbers, shows the value written out, in normalized scientific notation and in engineering notation, and can round to any number of significant digits.

convertercalculator

About the CSS Box Shadow Generator

This tool builds CSS box shadows visually. Stack as many shadow layers as you need, then shape the selected one with sliders and number inputs for horizontal and vertical offset, blur, spread, color and opacity, or flip it to an inset shadow. Layers can be reordered, duplicated, disabled for a quick before and after, or deleted. A live preview card shows the result as you drag, and you can move the card around the surface to judge the shadow against different edges.

Start from a preset when you want a known look: Material Design elevation steps, smooth multi-layer stacks, a hard offset retro shadow, rings, glows and a neumorphic pair. You can also paste an existing box-shadow value and the tool splits it back into editable layers. The output panel gives you the full declaration with one layer per line, a single line version and a ready Tailwind shadow-[…] class.

What you can do

  • Generate a CSS box-shadow and copy the finished declaration.
  • Layer several shadows and reorder, duplicate or disable each one.
  • Build a smooth layered shadow from stacked soft layers.
  • Copy a Tailwind arbitrary shadow class for utility-first projects.
  • Make an inset shadow or an inner glow with the inset toggle.
  • Recreate Material Design elevation shadows from presets.
  • Paste an existing box-shadow value and edit its layers.
  • Preview a shadow on custom surface and card colors, sizes and corner radii.

How to use the CSS Box Shadow Generator

  1. 1Pick a preset close to the look you want, keep the default card shadow, or paste an existing box-shadow to import it.
  2. 2Select a layer and drag the sliders for offset, blur, spread, color and opacity. Add more layers for depth.
  3. 3Adjust the preview surface color, card color, size and corner radius to match your design, and drag the card around to check the result.
  4. 4Copy the CSS declaration, the single line value or the Tailwind class from the output section.

Why layered shadows look better

A single large shadow tends to look like a gray smudge because real light does not work that way. Objects cast a tight dark shadow close to their edge and a wide faint one further out. Stacking several layers, each roughly doubling the offset and blur of the one before at a low opacity, reproduces that falloff and reads as depth instead of dirt. The Smooth and Dreamy presets are built exactly this way, so they are a good base to retint or rescale for your own design.

Inset shadows, rings and glows

The inset keyword draws the shadow inside the box instead of behind it, which is how pressed buttons, input wells and inner glows are made. A shadow with zero offset and zero blur but a positive spread produces a solid ring around the element, a common focus indicator trick. Zero offset with a large blur makes an outer glow, and the same recipe with inset glows inward. The Ring, Glow, Inset and Inner glow presets show each of these patterns ready to adjust.

Using the output

The main output is the complete box-shadow declaration, formatted one layer per line so it stays readable in a stylesheet. The single line variant fits an existing rule, and the Tailwind class wraps the same value as a shadow-[…] arbitrary value with spaces escaped as underscores. Disabled layers are left out of all three. If the element also needs a background, build one with the CSS Gradient Generator, and when the shadow animates on hover, pick its timing curve with the CSS Easing Previewer.

Related tools

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Checksum Validator

Verify a checksum online: drop a file, paste the expected checksum and see instantly whether they match. The hash type is detected from the checksum itself, covering MD5, SHA-1, SHA-256, SHA-512, BLAKE3, CRC-32 and more, and sha256sum lines or whole checksum files can be pasted as-is.

devsecurity

Chmod Calculator

Convert Unix file permissions between checkboxes, octal like 755 and symbolic notation like rwxr-xr-x, all kept in sync as you edit any of them. Covers setuid, setgid and the sticky bit, and shows the matching chmod command ready to copy.

devcalculator

Clipboard Inspector

See what your clipboard really holds. One press lists every format on it, from plain text and HTML to Excel tables and images, each with its type, size and a preview. Pasting works too, and can reveal even more formats.

dev