How to use box-shadow

• Bloggen
• >
• CSS tutorials
• >
• 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