Skip to content
10015 Tools
Categories
Text ToolsText ToolsImage ToolsImage ToolsPDF ToolsPDF ToolsSocial Media ToolsSocial Media ToolsSecurity ToolsSecurity ToolsCoding ToolsCoding ToolsCSS ToolsCSS ToolsColor ToolsColor ToolsMiscellaneous ToolsMiscellaneous Tools
Extensions
ChromeAdd to ChromeFirefoxAdd to Firefox
Menu
CSS Box Shadow Generator

CSS Box Shadow Generator

All 4 values plus inset, and you can stack several — which is what separates a real shadow from a grey blur.

Horizontal Offset: 3px
    Vertical Offset: 3px
      Blur: 10px
        Spread: 3px
          CSS
          -webkit-box-shadow: 3px 3px 10px 3px #ddd;
-moz-box-shadow: 3px 3px 10px 3px #ddd;
box-shadow: 3px 3px 10px 3px #ddd;

          Similar CSS Tools

          See All
          CSS Loader Generator
          CSS Loader Generator
          Generate fancy CSS loaders by specifying the type, color and size of the loading indicator
          Open
          CSS Background Pattern Generator
          CSS Background Pattern Generator
          Generate beautiful CSS-only background patterns and use it in your projects right away
          Open
          CSS Clip Path Generator
          CSS Clip Path Generator
          Generate CSS clip path with different patterns and use clip-path property in your projects
          Open

          What is Online CSS Box Shadow Generator?

          CSS Box Shadow Generator is a free online tool for generating CSS box shadows in any color and size. You can create the box shadow you need by tuning the parameters, preview it as a box, circle or header and get the CSS code directly. Here is how a box shadow looks in HTML.

          How box-shadow looks in HTML
          How box-shadow looks in HTML

          There are different parameters you must set in CSS box-shadow property. These are the following. Optional parameters are showed in parenthesis.

          box-shadow: (inset) h-offset v-offset (blur) (spread) color;

          • Inset: "inset" is an optional parameter works like a flag and it changes the shadow from outer to inner. By default, shadow is outset, and you don't need to write anything to set it in CSS. Just use "inset" to change its default position.
          • Horizontal Offset: Horizontal offset or h-offset is the distance of shadow from center in x-axis. It's a required parameter. It may be either negative or positive. Negative values put the shadow to the left of the box, while positive put the shadow to the right.
          • Vertical Offset: Vertical offset or v-offset is the distance of shadow from center in y-axis. It's a required parameter. It may be either negative or positive. Negative values put the shadow above the box, while positive values put the shadow below.
          • Blur: Blur is the amount of blur that will be applied to shadow. It has to be zero or positive. Blur is an optional parameter. If you don't set it, it will be calculated as zero.
          • Spread: Spread is the radius of the shadow spread that will be subtracted or added to shadow itself. If its value is negative, shadow will be smaller, vice versa. Spread is an optional parameter. If you don't set it, it will be calculated as zero.
          • Color: It determines the color of the shadow. It's a required parameter.

          How to use Online CSS Box Shadow Generator?

          You can generate a CSS box shadow by following these steps.

          1. First, set the sizes of h-offset, v-offset, blur and spread in pixels.
          2. Determine the colors for background, box, and shadow. Background and box colors are for preview-only. Shadow color will be used in the CSS code generated.
          3. You can enable inset shadow by activating the checkbox if needed.
          4. There are 2 preview modes. One is box and other is header. You can check the generated box shadow in both modes according to your needs.
          5. You can copy the CSS code generated manually or by using the button "Copy CSS".

          Frequently asked questions

          What do the four values mean?

          Horizontal offset, vertical offset, blur radius and spread. Offset moves the shadow, blur softens its edge, and spread grows or shrinks it before the blur is applied. Spread is the one most people forget and the one that fixes shadows that look wrong.

          Why do my shadows look cheap?

          Usually because they are too dark, too sharp and too symmetrical. Real light comes from above, so a small vertical offset with no horizontal one reads as natural. Low opacity and a generous blur do the rest.

          Can I use more than one shadow?

          Yes, comma-separated, and it is what makes shadows look convincing. A tight, darker shadow close to the element plus a wide, very faint one further out imitates how light actually falls far better than a single value.

          What is inset for?

          Drawing the shadow inside the element rather than outside, which reads as pressed in rather than raised. Useful for input fields and for the active state of a button.

          How does this differ from drop-shadow?

          box-shadow follows the element's box, including whatever curve the border radius puts on it. filter: drop-shadow follows the actual shape, including transparency, which is what you need for a shadow on a PNG logo or a clipped element. React Native is a third system again — the React Native Shadow Generator handles that one.