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

You can do more than just regular shadows!

Layered Box Shadows: Stack shadows on top of each other to make things look deeper.

/* Layered shadows example */
.layered-shadow {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.1);
}

Glow and Inner Box Shadows: Combine shadows for a glow or inner shadow effect.

/* Glowing effect example */
.glowing-element {
   box-shadow: 0 0 10px #ffcc00,
               0 0 20px #ffcc00,
               0 0 30px #ffcc00;
}

Button Effects: Add shadows to buttons.

<div class="button-effect">
<button class="button">Click Me</button>

</div>
/* Button effect example */
 .button-effect {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  background-color: #f0f0f0;
}

.button-effect .button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #3297db;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.button-effect .button:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}
.button-effect:active {
    box-shadow: none;
    transform: translateY(4px);
}

on hovering over the button ,it gets box shadow css applied.

Separate Elements: Use shadows to make different parts of a page stand out.

Customize Cards: Give card-like things a floating appearance.

3d box

<div class="rectangle three-d-box">some text</div>
.rectangle{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 48px;
  height:100px;
  width:600px;
  padding: 20px;
  margin: 40px auto;
  border-radius: 10px;

}
.three-d-box {
  color: #fff;
  background-color: #333;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), 
              -5px -5px 10px rgba(255, 255, 255, 0.2);
}
some text

Outlined box

<div class="rectangle outlined-box">Outlined Box</div>
.outlined-box {
  color: #fff;
  background: linear-gradient(45deg, #ffcc00, #ff3300);
  box-shadow: 
    0 0 5px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(0, 0, 0, 0.7);
}

You can learn linear gradient css here.

Outlined Box

Neon style box shadow css

<div class="rectangle neon-box">Neon Box</div>
.neon-box {
  color: #00ffcc;
  background-color: #2a2cbf;
  box-shadow: 
    0 0 10px #00ffcc,
    0 0 20px #00ffcc,
    0 0 30px #00ffcc,
    0 0 40px #00ffcc;
}
 
Neon Box

Card style box shadow css

<div class="rectangle card">Card Content</div>
.card {
    width: 300px;
    height: 200px;
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    border-radius: 10px;
    color: #333333;
    box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.1), 0 1px 3px  3px rgba(0, 0, 0, 0.08);
  }
Card Content

Neuromorphic box shadow css

Neuomorphic design uses soft, subtle shadows and highlights to give elements a three-dimensional appearance. These shadows are often used to create a “pressed” or “embossed” effect, making elements appear as if they are slightly raised from the surface.

<div class="neuromorphic-box-container"><div class="neuromorphic-box"></div></div>
.neuromorphic-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  width: auto;
  margin: 20px auto;
  background:#e0e0e0;
}

.neuromorphic-box {
  width: 200px;
  height: 200px;
  border-radius: 30px;
  background: #e0e0e0;
  box-shadow:  20px 20px 53px #bebebe,
             -20px -20px 53px #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

Adding Box Shadow CSS Inside Elements

You can also put shadows inside elements using inset:

.element {
  box-shadow: inset horizontal-offset vertical-offset blur-radius spread-radius color;
}

Example:

.inner-shadow-element {
  box-shadow: inset 0 0 10px 3px rgba(0, 0, 0, 0.5);
}

This gives the .inner-shadow-element an inner shadow that’s black, a bit blurry, and a little spread out.

Remember, you can play around with these values to get different effects. But don’t go overboard with shadows, or things might get too messy! Use shadows wisely to make your website or app look awesome.

Don't Miss Out! Subscribe to Read Our Latest Blogs.

If you found this blog helpful, share it on social media.

Subscription form (#5)

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Scroll to Top