Shadow Options
3px
3px
2px
0px
1
Multiple Shadows
- 1
- +
CSS Code
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, get the CSS code directly. Here is how a 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.
- 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 set: 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 set: 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.
- First, set the sizes of h-offset, v-offset, blur and spread in pixels.
- 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.
- You can enable inset shadow by activating the checkbox if needed.
- 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.
- You can copy the CSS code generated manually or by using the button "Copy CSS".