Back to Home

CSS box-shadow generator

Tune offset, blur, spread and colour with a live preview, then copy the box-shadow CSS.

Settings

Color 1
Color 2
Angle (135°)
background: linear-gradient(135deg, #6366f1, #a855f7);

How to use the Box Shadow Generator tool

  1. 1Adjust the offset, blur and spread.
  2. 2Pick a shadow colour.
  3. 3Copy the generated CSS.

Good to know

  • Runs in your browser.
  • Outputs standard box-shadow CSS.

Frequently asked questions

What's the difference between blur and spread?

Blur softens the shadow's edge; spread grows or shrinks the shadow before blurring.

How do I make a subtle shadow?

Use a small vertical offset, a larger blur and a low-opacity colour, such as rgba(0,0,0,0.1).

Does box-shadow slow pages down?

Not noticeably for normal use; very large blurred shadows on many elements can affect scrolling on slow devices.

Related tools

CSS Gradient GeneratorDesign linear CSS gradients visually, preview them live and copy the CSS code. Free gradient generator for web designers and developers.JS / CSS / HTML MinifierMinify JavaScript, CSS and HTML to shrink file size and speed up your site. Removes comments and whitespace safely, in your browser.HTML FormatterBeautify messy or minified HTML with clean, consistent indentation so it's easy to read and edit. Free and private.