box-shadow css property explained
The box-shadow property in CSS is used to add shadows to HTML elements, such as divs or buttons, allowing you to create depth and relief effects for these elements. This property takes a few parameters that control the appearance of the shadow:
-
Offset X
This parameter specifies the shadow's horizontal offset. With a positive value, the shadow will move to the right, while a negative value will move it to the left.
-
Offset Y
This parameter specifies the shadow's vertical offset. With a positive value, the shadow will move downward, while a negative value will move it upward.
-
Blur Radius
This parameter determines how blurry the shadow will be. A larger value will make the shadow appear less defined and more diffused.
-
Spread Radius
This parameter controls how extended or constrained the shadow will be relative to the element. A larger value will make the shadow spread farther from the element.
-
Color
This parameter specifies the shadow's color. You can use values like color names, hexadecimal codes, rgba() or hsla() functions to set the color.
-
Inset
This parameter is optional, and if specified, it transforms the shadow into an inner shadow, meaning it appears inside the element, providing a depth effect.
Note: To attach more than one shadow to an element, add a comma-separated list of shadows box-shadow: 2px 5px 34px 10px rgba(201, 201, 201, 0.65), 10px 15px 15px 8px lightred;
Read more about the CSS box-shadow property on:
MDN - box-shadow - CSS-TRICKS - w3schools.com
Daily projects you can build to
improve your coding skills!
