How to use box-shadow
Box-shadow is a CSS property that allows you to add a shadow effect to an element. The property takes four values: horizontal offset, vertical offset, blur radius, and color. You can apply this property to any HTML element such as a div, an image, or a button. The box-shadow property adds an extra dimension to your website and helps to highlight important elements.
Syntax Definition:
The syntax for the box-shadow property is as follows:
box-shadow: h-offset v-offset blur spread color;
The values are defined as:
- h-offset: This is the horizontal distance of the shadow from the element. Negative values are allowed, which indicates that the shadow will be on the left side of the element.
- v-offset: This is the vertical distance of the shadow from the element. Negative values are allowed, which indicates that the shadow will be above the element.
- blur: The blur property specifies the blurriness of the shadow. Higher values produce a more prominent blur effect. A value of 0 will generate a sharp shadow.
- spread: This property is optional and it defines the size of the shadow. Negative values make the shadow smaller while positive values make it bigger.
- color: This property defines the color of the shadow. You can use any color format such as RGB, HEX, HSL, or named color.
Examples:
Here are some examples of using box-shadow property:
Example 1:
Box-shadow property with a single color:
div { box-shadow: 3px 3px 5px #888888; }
This will generate a shadow with a horizontal offset of 3 pixels, a vertical offset of 3 pixels, a blur of 5 pixels, and a color of #888888.
Example 2:
Box-shadow property with multiple shadows:
div { box-shadow: 3px 3px 5px #888888, -3px -3px 5px #888888; }
This example generates two shadows: one on the top-left corner of the box and the other on the bottom-right corner of the box. The shadows have the same blur radius and color, but opposite directions.
Example 3:
Box-shadow property with inset shadow:
div { box-shadow: inset 3px 3px 5px #888888; }
This example generates an inset shadow with a horizontal offset of 3 pixels, a vertical offset of 3 pixels, a blur of 5 pixels, and a color of #888888.
Example 4:
Box-shadow property with spread radius and RGBA color:
div { box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.5); }
This example generates a shadow with a horizontal offset of 3 pixels, a vertical offset of 3 pixels, a blur of 5 pixels, a spread radius of 2 pixels, and an RGBA color of black with 50% opacity.
Written by: Maria Jensen 23-05-2023 Written in: CSS tutorials
7 Comments
Leave a Reply
You must be logged in to post a comment.
Nice article! It’s very usefull for people like me who doesn’t know how to make something look pretty in the web page . The information was clear and easy, but the syntax is quite compex. It will take me some time to figure it out, but I’m sure I can do it. Thanks for sharing!
I found this tutorial on using box shadows incredibly helpful! The step-by-step instructions made it easy for me to follow along and implement box shadows on my website . The examples and explanations provided were clear and concise, allowing me to create some stunning visual effects. Thank you for sharing this insightful tutorial!
This tutoriaal w as super helpfull . I was always confussed wh en it came to usinng box shaddow, but th is guide broke it down in a simp le a nd concise way. Now I feel much m ore co nfident in applying b ox shadow to my projects. Really th ank ful for sharing this!
This tutorial was really helpful in teaching me how to use box shadow in my CSS projects . I appreciate the clear explanations and examples provided. Thank you!
This tutorial was so helpful! I never realized how easy it was to add box shadows to my elements . Thanks for breaking it down step by step. Can’t wait to start using this on my own projects!
This tutorial was super helpful! I was always confused about how to properly use box-shadow in CSS, but this guide really broke it down for me . Can’t wait to start incorporating box shadows into my designs. Thanks!
I found this tutorial super helpful! I’ve always struggled with box shadows but this guide broke it down into easy steps . Can’t wait to use this on my next project. Thank you!