Tools Hub
Colors & design

Box shadow designer

Preview a CSS box shadow with adjustable offsets, blur, spread and color.

How to use
Free. Always.Inputs stay in your browserNo sign-up

Your saved tools stay in this browser.

Box shadow designer — workspace

Loading your tool…

How to use: Box shadow designer

  1. Start with the example, or replace it with your own values.

  2. Review Horizontal offset (px), Vertical offset (px), Blur (px), Spread (px), Color, then select “Get result”.

  3. Read the result, then copy or download it. Edit any input to try again.

What you can do

  • Preview a CSS box shadow with adjustable offsets, blur, spread and color.

What you get

  • A result you can review, copy or download. Numeric tools show labeled calculations; text tools show the transformed output.

What you need

Horizontal offset (px)
Enter a number (-100–100).
Vertical offset (px)
Enter a number (-100–100).
Blur (px)
Enter a number (0–200).
Spread (px)
Enter a number (-100–100).
Color
Choose a color or enter a six-digit hexadecimal color.

Try an example

Horizontal offset (px)
0
Vertical offset (px)
8
Blur (px)
24
Spread (px)
0
Color
#6550c8
Try it in the tool

Good to know

  • Use a current browser with JavaScript enabled. Available formats and speed depend on your browser, device and input size.

Your work stays on your device

Your files and entered values are processed in your browser and are not uploaded for processing. The website and any required processing engines still download from the site.

Questions & answers

Is Box shadow designer free?

Yes. Box shadow designer is free to use and does not require an account.

Are my files or entered values uploaded?

Your files and entered values are processed in your browser and are not uploaded for processing. The website and any required processing engines still download from the site.

What result can I save?

A result you can review, copy or download. Numeric tools show labeled calculations; text tools show the transformed output.

What should I check before using the result?

Use a current browser with JavaScript enabled. Available formats and speed depend on your browser, device and input size.

Keep going with another tool

Aspect ratio calculator Find an aspect ratio and resize without stretching.Color palette builder Create lighter and darker shades from one base color.Blend two colors Mix two RGB colors using a chosen proportion of the second color.Compare RGB colors Measure the numerical distance between two RGB colors, without an accessibility rating.Fluid type size builder Create a CSS clamp() font size that scales between two viewport widths.