CSS Minifier
Minify your CSS code and make the file size smaller that helps to load your website faster.
-webkit-box-shadow: ;
-moz-box-shadow: ;
box-shadow: ;
Check out some other tools that you might find useful
CSS Minifier
Minify your CSS code and make the file size smaller that helps to load your website faster.
CSS Beautifier
Beautify your CSS code and make it more readable and well-structured. Easy to beautify your CSS code.
HEX to RGB Converter
Convert HEX color code to RGB color code online. This tool allows you to convert HEX color code to RGB color code.
RGB to HEX Converter
Convert RGB color code to HEX color code online. This tool allows you to convert RGB color code to HEX color code.
PX to REM Converter
Convert Pixels to REM online. Customize the base value for the conversion and get the desired output
REM to PX Converter
Convert REM to Pixels online easily. Adjust the base value to customize your conversions for precise results.
CSS Glassmorphism Generator
Create a glassmorphism effect with pure CSS or Tailwind CSS. Customize the background, blur, and opacity, then grab the CSS code with vendor prefixes.
CSS Underline Generator
Generate CSS for underlining text with pure CSS and Tailwind CSS. Customize the underline color, style, and offset.
CSS Text Glow Generator
Generate CSS text glow, Tailwind CSS support. Customize the glow color, radius, and strength.
CSS Glow Generator
Generate CSS glow, Tailwind CSS support. Customize the glow color, radius, and strength.
CSS Text Shadow Generator
Generate CSS text shadow, Tailwind CSS support. Customize the shadow color, blur, spread, and offset.
Box shadow is a effect that allow you to a shadow on html element. It looks like the element is raised on the page. We can use box-shadow
property in CSS to add shadow to the box.
Here the simple explanation of all features with its usage:
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.
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.
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.
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.
This is the color of the shadow. You can choose any color you want.
This is the opacity of the shadow.
This is the type of the shadow. You can choose from the following types:
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.
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.
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.
Yes, this tool generates code for Tailwind CSS as well.
This tool generates code for both Pure CSS and Tailwind. 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.