🧰Locly

Generate CSS Box Shadow

Generate and preview CSS box-shadow values

Preview

About This Tool

CSS Box Shadow Generator lets you visually tune offset, blur, spread, color, and inset, then copy a ready box-shadow declaration. After Clear, copy stays disabled until you set a real shadow again. Everything is processed locally in your browser.

How to Use

  1. Adjust offset, blur, and spread sliders
  2. Pick a color and optional inset
  3. Preview the shadow on the sample box
  4. Copy the CSS when the output is ready
  5. Clear resets to an empty shadow (copy disabled)

Common Use Cases

  • UI: Craft card and button elevations
  • Design systems: Explore shadow tokens quickly
  • Teaching: Demonstrate blur vs spread
  • Prototypes: Copy CSS into a stylesheet
  • Mobile: Tweak shadows without a desktop IDE

FAQ

Q1: Why can’t I copy after Clear?

Clear removes an effective shadow so you don’t copy empty or misleading CSS.

Q2: Is anything uploaded?

No. Generation is processed locally in your browser.

Q3: Does inset work?

Yes — enable Inset for inner shadows.

Q4: Can I use rgba colors?

Yes — paste any valid CSS color string, including rgba().

Related Tools

Color ConverterContrast CheckerCSS Unit ConverterColor PaletteCSS Formatter