CSS Shadow

CSS shadow provides two types of shadows that will be applied either to text or to the element.

Followings are the CSS3 shadow property:

1.0 box-shadow
2.0 text-shadow

Text Shadow

CSS text-shadow adds a shadow around the text.

The general syntax of text-shadow:

    
   text-shadow:x-offset y-offset blur color;

x-offset-Used to set up the horizontal shadow of the text.
y-offset-used to set up the vertical shadow of the text.
blur-radius-Used to set the amount of blur which makes the text look hazy.
color Used to set shadow color of the text.

Text Shadow Using X-offset & Y-offset

Source Code

          .text_shadow_offset {
 text-shadow: 2px 1px;
}

Try it now

Text Shadow Without Blur Radius

Source Code

          .text_shadow_No_blur_radius {
 text-shadow: 1px 0.8px;
}

Try it now

Text Shadow Using Blur Radius

Source Code

          .text_shadow_blur_radius {
 text-shadow: 1px 0.8px 5px;
}

Try it now

Text Shadow Without Color

Source Code

          .text_shadow_no_color{
  text-shadow: 1px 0.8px 2px;
}

Try it now

Text Shadow Using Color

Source Code

          .text_shadow_color {
 text-shadow: 0px 0px 3px aqua;
}

Try it now

Multiple Text Shadow Property

Multiple text-shadow properties are applied to the text by separating text shadow property by a comma.

Source Code

          .single_text_shadow {
 text-shadow: 0.5px 1.8px 1px Tomato;
}
.multi_text_shadow_2 {
 text-shadow: 0.5px 0.1em 0.5px Tomato, 3px 1px blue;
}
.multi_text_shadow_3 {
 text-shadow: 0.5px 0.1em 0.5px Tomato, 3px 1px blue, 6px 0px 1px yellow;
}

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4