The Shadow attribute in CSS is used to set the shadow for the element elements in the website.

In this article, TipsMake.com will work with you to learn about the 2 most used effects:

1. text-shadow for text.
2. box-shadow for box elements.

Text Shadow

The text-shadow attribute used to create shadows for elements in the form of text helps display text prominently similar to 3D text.

Syntax

 text-shadow: h-shadow v-shadow blur-radius color 

Text-shadow consists of 4 parameters:

1. h-shadow: position of the ball falling horizontally, negative number pushes the ball upwards, positive number pushes the ball downwards (required).
2. v-shadow: position of the shadow vertically, negative number pushes the ball backward, positive number pushes the ball forward (required).
3. blur-radius: shadow blur (optional).
4. color: color of the ball (optional).

Examples

Example 1: Simplest, you format the 2px vertical shadow, 2px horizontally, the result is as follows:

 h1 { 
  text-shadow: 2px 2px; 
 } 

Website TipsMake.com

Note: Internet Explorer 9 and earlier versions do not support the text-shadow attribute

Example 2: Change the color for the shadow

 h1 { 
  text-shadow: 5px 5px violet; 
 } 

Website TipsMake.com

Example 3: Add blur effect - blur the shadow

 h1 { 
  text-shadow: 5px 5px 10px violet; 
 } 

Website TipsMake.com

Example 4: Shadow highlights neon style

 h1 { 
 text-shadow: 0 0 3px red; 
 }

Use lots of Shadow for text

If you want a colorful shadow, add more by adding the same values ​​for the property and separating the values ​​by commas.

For example: Shadow style neon lights are green and yellow

 h1 { 
  text-shadow: 0 0 5px gold, 0 0 7px #0000FF; 
 } 

Example: Shadow combines 3 colors

 h1 { 
 color: white; 
 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; 
 } 

Website TipsMake.com

Example: Use text-shadow to create a simple border around the text

 h1 { 
  color: #e9d8f4; 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 } 

Website TipsMake.com

Box Shadow

The box-shadow attribute used to create shadows for box-like elements, works with borders, makes the display element stand out similar to a 3D box.

Box-shadow syntax

 box-shadow: h-offset v-offset blur spread color 

Box-shadow consists of 5 parameters:

1. h-offset: where the ball falls horizontally, the positive number pushes the ball down, the negative number pushes the ball upwards (required).
2. v-offset: the position of the ball vertically, the positive number pushes the ball forward, the negative number pushes the ball backward (required).
3. spread: size of the ball (optional).
4. blur: shadow blur (optional).
5. color: color of the ball (optional).

Examples

Example 1: Simplest, you format the shadow vertically 10px, width 10px, the result is as follows:

 div { 
  box-shadow: 10px 10px; 
 } 

Box-shadow attribute

Example 2: Change the color for the shadow

 div { 
  box-shadow: 10px 10px midnightblue; 
 } 

Example 3: Add blur effect - blur the shadow

 div { 
 box-shadow: 10px 10px 5px midnightblue; 
 } 

Example 4: Add shadows to the elements pseudo-element :: before and :: after to create more special effects:

 #boxshadow { 
  position: relative; 
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
  padding: 10px; 
  background: white; 
 } 
 
 #boxshadow img { 
  width: 100%; 
  border: 1px solid #8a4419; 
  border-style: inset; 
 } 
 
 #boxshadow::after { 
  content: ''; 
  position: absolute; 
  z-index: -1; /* ẩn shadow phía sau hình ảnh */ 
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
  width: 70%; 
  left: 15%; /* một nửa của 30% còn lại */ 
  height: 100px; 
  bottom: 0; 
 } 

Example 5: Create a 3D box, calendar format

 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; 
 } 

Samuel Daniel

Update 25 May 2019