CSS Box Shadow Generator

CSS Box Shadow Generator

Horizontal Offset: 3px
    Vertical Offset: 3px
      Blur: 10px
        Spread: 3px
          10015 Tools
          +

          Get “Online Tools” browser extension!

          Access all tools powered by 10015.io with just one click

          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 have to 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 substracted 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".