The css box-shadow property can add some visual interest to any website. Shadow effects can be added to elements to create some nice effects. First of all here is a basic ‘div’ element with some css styles that create a red rectangle with a blue border.

See the Pen boxshadow1 by Daniel (@Parsons) on CodePen.

In addition to the rectangle created the css box-shadow property is now added with three values. An offset-x value of ’13px’, an offset-y value of ‘8px’ and a color value of ‘black’.

See the Pen boxshadow2 by Daniel (@Parsons) on CodePen.

Minus values are also valid. Try them in the editor to see the effects!

This next example adds a ‘blur-radius’ to the box-shadow.

See the Pen boxshadow3 by Daniel (@Parsons) on CodePen.

The ‘blur-radius’ value is the third value of ’21px’ declared in the css box-shadow property.

Another value that can be added is the ‘spread-radius’ value.

See the Pen box shadow4 by Daniel (@Parsons) on CodePen.

While this probably doesn’t look that attractive it does demonstrate the ‘spread-radius’ value which is the fourth value declared with a value of ’34px’.

Using a ‘rgba‘ color value allows or an opacity value to be included. The example below contains two rectangles. The top rectangle has a rgba value of (0,0,0,0.9) and the bottom rectangle has a rgba value of (0,0,0,0.2).

See the Pen boxshadow5 by Daniel (@Parsons) on CodePen.

The opacity value is the fourth value declared in-between the brackets of the rgba value. The ‘rgba’ values stand for rgba(red,green,blue,alpha). Learn more about ‘rgb’ and ‘rgba’ here.

CSS Box-Shadow Property – Inset

In addition an ‘inset’ value can be added to the css box-shadow property.

See the Pen boxshadow6 by Daniel (@Parsons) on CodePen.

And finally the css box-shadow property will work if a ‘border-radius’ is added. Here in this example below on line 3 a ‘border-radius’ of ’34 pixels’ is added and the ‘box-shadow’ adjusts accordingly.

See the Pen boxshadow7 by Daniel (@Parsons) on CodePen.

CSS3 logo. CSS Box-Shadow Property

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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