CSS Box Shadow: Shadow Effect in CSS

CSS Box Shadow: Shadow Effect in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

The Shadow attribute in CSS helps set the shadow for the element elements in the website.

This guide, TipsMake.com will work with you to learn about the 2 most used effects:

• text-shadow for text.
• 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:

• h-shadow: position of the ball falling horizontally, negative number pushes the ball upwards, positive number pushes the ball downwards (required).
• v-shadow: position of the shadow vertically, negative number pushes the ball backward, positive number pushes the ball forward (required).
• blur-radius: shadow blur (optional).
• 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 instance,: 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:

• h-offset: where the ball falls horizontally, the positive number pushes the ball down, the negative number pushes the ball upwards (required).
• v-offset: the position of the ball vertically, the positive number pushes the ball forward, the negative number pushes the ball backward (required).
• spread: size of the ball (optional).
• blur: shadow blur (optional).
• 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; 
 } 

FAQ

What should you know about 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.

What should you know about syntax text-shadow: h-shadow v-shadow blur-radius color Text-shadow consists of 4 parameters: h-shadow: position of the ball falling horizontally, negative number pushes the ball upwards, positive number pushes the ball downwards (required). v-shadow: position of the shadow vertically, negative number pushes the ball backward, positive number pushes the ball forward (required). blur-radius: shadow blur (optional). color: color of the ball (optional). Examples?

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

What should you know about website TipsMake.com?

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