View Categories

CSS Box Shadow

1 min read

SS box-shadow Property #

The CSS box-shadow property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

This is a yellow <div> element with a black box-shadow
div { box-shadow: 10px 10px; }

Next, add a color to the shadow:

This is a yellow <div> element with a grey box-shadow
div { box-shadow: 10px 10px grey; }

Next, add a blur effect to the shadow:

This is a yellow <div> element with a blurred, grey box-shadow
div { box-shadow: 10px 10px 5px grey; }

Cards #

You can also use the box-shadow property to create paper-like cards:

Cards #

The box-shadow property can be used to create paper-like cards:

1 #

January 1, 2016

Svkhbaatar

Svkhbaatar square,Mongolia

div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }

CSS Shadow Properties #

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

Powered by BetterDocs

Leave a Reply