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

  • Caroline says:

    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!

  • Cameron says:

    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!

  • Penelope says:

    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!

  • Orlando says:

    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!

  • Audrey says:

    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!

  • Emma says:

    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!

  • Cameron says:

    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!

Leave a Reply