How to apply Box Shadow Css to Elements

Box Shadow Css : Adding shadows to web page Elements

When you want to make something on a webpage look like it’s floating a bit or has some depth, you can use box shadow css . It’s like giving an element a shadow that makes it pop out a little. This works great for things like boxes, buttons, and image

How to Use box-shadow

Here’s how you write it in CSS:

selector {
  box-shadow: h-offset v-offset blur spread color;
}

• selector: Think of it as pointing at the thing you want to add the shadow to. It could be an element type (like a div), an ID (like #fancy-box), or a class (like .super-button).
• h-offset and v-offset: These tell the shadow where to go. It’s like saying “go left-right” and “go up-down.” You can even make the shadow move in the opposite direction with negative numbers.
• blur: Want a soft shadow? Add some blur with a number. For a sharp shadow, use 0.
• spread: This one controls the size of the shadow. You can skip it if you’re not into stretching shadows.
• color: Pick a color for your shadow using any of those CSS color codes.

Examples of box-shadow

Let’s look at some examples to understand it better:

Simple Box Shadow css:

<div class="box box-shadow-effect"></div>

.box{
height: 200px;
width: 200px;
background-color: #f6f6f6;
margin: 20px auto;
border-radius: 10px;
}
.box-shadow-effect{
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

This makes an element with the class .box have a shadow that’s 2 pixels to the right and 2 pixels down. The shadow is a bit blurry and semi-transparent black.

Multiple Shadows:

.multiple-shadows {
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.2),
    -2px -2px 4px rgba(22, 220, 220,0.4);
}

This gives an element with the class .multiple-shadows two shadows: one on the bottom right and another on the top left.

Cool Effects You Can Make