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

CSS3 includes several new text features.

In this chapter you will learn about the following text attributes:

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

Browser Support

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

In CSS3, the text-shadow property applies to text shadows.

You specify the horizontal shadow, vertical shadow, blur distance, and color of the shadow:

Text shadow effect!

Example

h1 { text-shadow: 5px 5px 5px #FF0000; }
Try it yourself »

Then, add a haze impact to the shadow:

Text shadow effect!

Example

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

The following precedent demonstrates a white content with dark shadow:

Text shadow effect!

Example

h1 {
    color: white;
    text-shadow: 2px 4px hotpink;
}
Try it yourself »

The following model shows a#dd801d neon gleam shadow:

Text shadow effect!

Example

h1 {
    text-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 {
    text-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 {
    color: white;
    text-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 color 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; b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5); pa dding: 10px; bac kground: white; } #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; } #boxshadow::after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 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); text-align: center; }
Try it (Text Card) » Try it (Image Card) »


darkblue