Instacode

CSS Box Shadow Generator

Stack shadow layers, adjust them with sliders, and copy the CSS or Tailwind class when the preview looks right.

CSS Box Shadow Generator · saved on this device only

This CSS box shadow generator is for developers and designers who want to build layered shadows without hand-editing numbers. Add as many layers as you need and tune offset, blur, spread, color and opacity with sliders or number fields. A live preview updates as you work. You can start from one of twelve presets or from a blank slate.

Everything runs in your browser and nothing is uploaded to a server. Your layers and preview settings are autosaved in this browser's local storage, so they are still there when you come back. When the shadow is right, copy it as CSS or as a Tailwind class, or download it as a .css file.

How to use it

  1. Open the “Presets” tab and click one to start from it, or press “Clear” and then “Add layer” to build from scratch.
  2. In the “Adjust” tab, move the “Offset X”, “Offset Y”, “Blur”, “Spread” and “Opacity” sliders, or type exact values into the number fields.
  3. Set the “Shadow color” with the color picker, the hex field or a swatch. Turn on “Inset (shadow inside the box)” if you want an inner shadow.
  4. Press “Add layer” or “Duplicate” to stack more shadows. Use the up and down arrow buttons to reorder layers and the eye icon to hide one.
  5. Use the “Preview box” tab to change the page background, box color, border radius and box size. Press “Shadow off” on the preview to compare against no shadow.
  6. Choose the “CSS” or “Tailwind” tab in the code panel, then press “Copy” (or “Copy CSS” in the header) or “Download .css”.

What it does

  • Any number of shadow layers, each with its own offset X/Y (−100 to 100 px), blur (0 to 200 px), spread (−100 to 100 px), color and opacity (0 to 100%).
  • Each slider has a matching number field, and colors can be set with a picker, a hex field or quick swatches.
  • Per-layer controls: inset toggle, show/hide, duplicate, move up or down, and delete.
  • Twelve presets, including “Soft card”, “Neumorphism”, “Long shadow”, “Neon glow”, “Pressed in” and “Focus ring”.
  • “Undo” restores your previous layers after a preset, “Clear” or a layer delete, and “Reset” returns to the example shadow.
  • Output as a CSS box-shadow declaration or a Tailwind arbitrary-value class, with “Copy” and “Download .css” buttons.
  • Adjustable preview box (background, box color, border radius, size) and a “Shadow on/off” toggle. Your work is autosaved in the browser.

Make your own version

Instacode builds apps like this from a single prompt. Start from this one, or remix the app above and describe what to change in plain English.

Layered box-shadow builder with sliders for offset, blur, spread, color and opacity, multiple layers, presets, and copy CSS.

Questions

Is this CSS box shadow generator free?

Yes. It is free to use and does not ask you to sign up or create an account.

Where is my data stored?

Your layers and preview settings are saved only in your browser's local storage on your device. Nothing is sent to a server. If you clear site data, the saved state is removed.

How do I save or export the shadow?

Press “Copy” to put the code on your clipboard, or “Download .css” to get a box-shadow.css file with the rule wrapped in an .element selector. You can switch between “CSS” and “Tailwind” output first.

Are the preview box settings included in the copied CSS?

No. Page background, box color, border radius and box size only change the preview. The copied code contains just the box-shadow value, so the shadow may look different on your own page colors.

How do multiple shadow layers work in CSS?

CSS lets you list several shadows separated by commas in one box-shadow property, and the first one is drawn on top. Here the top layer in the list sits in front, and hidden layers are left out of the output.

More free apps

Updated October 12, 2026