NotchTools

CSS Box Shadow Generator

CSS
-webkit-box-shadow: ;
-moz-box-shadow: ; 
box-shadow: ;
Tailwind CSS class
px
px
px
px

How to generate CSS box shadow code with CSS Box Shadow Generator?

Here the simple explanation of all features with its usage:

Horizontal Length

This is the horizontal offset of the shadow. A positive value will push the shadow right and a negative value will push it left. Max is 200 and min is -200.

Vertical Length

This is the vertical offset of the shadow. A positive value will push the shadow down and a negative value will push it up. Max is 200 and min is -200.

Blur Radius

This is the blur radius of the shadow. The higher the value, the more blurred the shadow will be. Max is 300 and min is 0.

Spread Radius

This is the spread radius of the shadow. A positive value will expand the shadow and a negative value will shrink it. Max is 200 and min is -200.

Shadow Color

This is the color of the shadow. You can choose any color you want.

Shadow Opacity

This is the opacity of the shadow.

Shadow Type

This is the type of the shadow. You can choose from the following types:

  • Inset : The shadow is inside the box.
  • Outset : The shadow is outside the box.

Box Color

This is given just to change the background color of the box to see the shadow effect. This is not a part of the shadow.

Pure CSS and Tailwind CSS code support

This tool help you to generate Pure CSS as well as Tailwind CSS code for the shadow. You can copy the code and use it in your project.

FAQs

What is the difference between box-shadow and text-shadow in CSS?

box-shadow : It is used to add shadow to the box. It can be used with any HTML element.

text-shadow : It is used to add shadow to the text. It can be used with text elements only.

Does this tool generate code for Tailwind CSS?

Yes, this tool generates code for Tailwind CSS as well. This is also tailwind css box shadow generator.

What is Pure CSS and Tailwind CSS code support in CSS Box Shadow?

This tool generates code for both Pure CSS and Tailwind CSS. You can copy the code and use it in your project.
Pure CSS : Pure CSS means the code which is written in CSS only without any framework like Tailwind CSS.
Tailwind CSS : Tailwind CSS is a utility-first CSS framework. It is a framework which is used to write CSS code in a faster way.