CSS Box Shadow Generator

What is Online CSS Box Shadow Generator?

CSS Box Shadow Generator is a free online tool that allows you to create CSS box shadows in any color or size. You can get the CSS code for the box-shadow you want by tweaking the settings, previewing it as a box, circle, or header, and then copying it.

The CSS box-shadow property has several properties that must be set. The following are some of them. Parameters that are optional are shown in parenthesis.

• Inset: "inset" is a flag-like optional parameter that transforms the shadow from outer to inner. The shadow is outset by default, and you don't need to add anything in CSS to change it. To modify its default position, simply type "inset."
• Horizontal Offset: Horizontal offset, also known as h-offset, is the distance between the shadow and the x-axis center. It's a mandatory parameter. It could be either favorable or bad. The shadow is cast to the left of the box for negative values, and to the right for positive values.
• Vertical Offset: The vertical offset, often known as v-offset, is the distance between the shadow and the y-axis center. It's a mandatory parameter. It could be either favorable or bad. The shadow is placed above the box when the value is negative, and below the box when the value is positive.
• Blur: Blur refers to the amount of blur imparted to shadows. It has to be either 0 or 1. Blur is a parameter that can be turned on or off. It will be calculated as zero if you do not set it.
• Spread: The radius of the shadow spread that will be subtracted or added to the shadow itself is known as the spread. The shadow will be smaller if its value is negative, and vice versa. Spread is a parameter that can be turned on or off. It will be calculated as zero if you do not set it.
• Color: It determines the shadow's color. It's a mandatory parameter.

How to use Online CSS Box Shadow Generator?

1. Set the h-offset, v-offset, blur, and spread sizes in pixels first.
2. Decide on the backdrop, box, and shadow colors. The background and box colors are intended for demonstration purposes. In the CSS code generated, the shadow color will be used.
3. If necessary, activate the checkbox to enable inset shadow.
4. There are three different preview modes to choose from: box, circle, and header. You can inspect the created box-shadow in all settings to see whether it meets your requirements.
5. You can manually copy the CSS code or use the Copy button to do so.