What is Box Shadow Generator?

Generator of CSS box-shadow property.
You can easily generate a box-shadow of your choice while checking the preview that changes in real time.

How to use Box Shadow Generator

As you manipulate each setting in the configuration area, box-shadow is applied to the preview in the output area in real time.

Each setting corresponds to a property of box-shadow. The values are described below, but if you need more information about box-shadow, please refer to MDN's documentation.
box-shadow - CSS: Cascading Style Sheets | MDN

About the Configuration

offsetX、offsetY

offsetX and offsetY set the offset of the shadow.

offsetX represents the horizontal distance. Positive values set the shadow to the right negative values set the shadow to the left. offsetY is the vertical distance. Positive values set the shadow downward; negative values set the shadow upward.
If both are 0, they are set behind the element to which the shadow is applied.

blur

blur allows you to set the blurring of shadows. The higher the value, the greater the blur. As a result, the area of the shadow becomes larger and the color of the shadow becomes lighter.

spread

spread allows you to set the spread of the shadow. The larger the value, the larger the shadow. 0 means the shadow is the same size as the element.

inset

When inset is turned on, the shadow is set inside the element.

color

You can specify the color of the shadow. Selecting the color box area displays a color palette, allowing you to change the color.

preview color

This setting does not directly affect the box-shadow CSS, but allows you to change the preview box color and background color, respectively.