WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Shadow Effects


adult-drink clear

Box Shadow

With CSS3 you can make shadow effects!

Hover over me!

CSS3 Shadow Effects

With CSS3 you can add shadow to content and to elements.

In this part you will find out about the accompanying properties:

  • text-shadow
  • box-shadow

Browser Support

The numbers in the table indicate the primary program form that completely underpins the property.

Numbers pursued by - webkit-or - moz-indicates the primary form that worked with a prefix.

Property
text-shadow 4.0 12.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 - webkit-
12.0 9.0 4.0
3.5 - moz-
5.1
3.1 - webkit-
10.5

CSS3 Text Shadow

The CSS3 text-shadow property applies shadow to text.

In its least complex use, you just determine the level shadow (2px) and the vertical shadow (2px):

Text shadow effect!

Example

h1 {
    content shadow: 2px 2px;
}
Try it yourself »

Next, add a shading to the shadow:

Text shadow effect!

Example

h1 {
    content shadow: 2px 2px#dd801d;
}
Try it yourself »

Then, add a haze impact to the shadow:

Text shadow effect!

Example

h1 {
    content shadow: 2px 5px#dd801d;
}
Try it yourself »

The following precedent demonstrates a white content with dark shadow:

Text shadow effect!

Example

h1 {
    shading: white;
    content shadow: 2px 4px hotpink;
}
Try it yourself »

The following model shows a#dd801d neon gleam shadow:

Text shadow effect!

Example

h1 {
    content shadow: 0 3px hotpink;
}
Try it yourself »

Multiple Shadows

To add more than one shadow to the content, you can include a comma-isolated rundown of shadows.

The following model shows a#dd801d and blue neon shine shadow:

Text shadow effect!

Example

h1 {
    content shadow: 0 3px #FF0000, 0 5px darkblue;
}
Try it yourself »

The following model demonstrates a white content with dark, blue, and darkblue shadow:

Text shadow effect!

Example

h1 {
    shading: white;
    content shadow: 1px 2px dark, 0 25px blue, 0 5px darkblue;
}
Try it yourself »

CSS3 box-shadow Property

The CSS3 box-shadow property applies shadow to elements.

In its easiest use, you just determine the even shadow and the vertical shadow:

This is a yellow <div> component with a black box-shadow

Example

div {
    box-shadow: 10px 10px;
}
Try it yourself »

Next, add a shading to the shadow:

This is a yellow <div> component with a dim box-shadow

Example

div {
    box-shadow: 10px grey;
}
Try it yourself »

Next, add a haze impact to the shadow:

This is a yellow <div> component with an obscured, dim box-shadow

Example

div {
    box-shadow: 10px 5px grey;
}
Try it yourself »

You can likewise add shadows to the ::previously and ::after pseudo-classes, to make an intriguing effect:

Example

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    cushioning: 10px;
    foundation: white;
}

#boxshadow img {
    width: 100%;
    fringe: 1px strong #8a4419;
    fringe style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-file: - 1;/* shroud shadow behind picture */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%;/* one half of the staying 30% */
    stature: 100px;
    base: 0;
}
Try it yourself »

Cards

An case of utilizing the box-shadow property to make paper-like cards:

1

January 8, 2018

architecture-structures cars.jpg

architecture-structures vehicles

Example

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);
    content adjust: center;
}
Try it (Text Card) » Try it (Image Card) »


darkblue