Box Shadow Generator
Interactively generates CSS box-shadow.
Configuration
Output
box-shadow: 0px 0px 20px 16px rgba(17, 17, 26, 0.08);
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.