Dr. Roger Ianjamasimanana

CSS box-shadow editable templates

By Dr. Roger Ianjamasimanana

HTML/CSS Editor

JavaScript Editor


Console Output


                      
                          
HTML Output

                          
                          

                        

                     


The box-shadow property in CSS allows you to add shadow effects around an element's frame. You can set multiple effects separated by commas. 
  These shadows are drawn outside the element's frame — they don't affect the layout of the document.

Box-shadow basic syntax



The syntax of box-shadow is:



box-shadow: offset-x offset-y blur-radius spread-radius color;



Explanation


    

  •  offset-x and offset-y: these set the horizontal and vertical distances of the shadow. Positive values move the shadow right and down, respectively.
    • 

  •  blur-radius: (optional) defines how blurry the shadow is. The larger the value, the more blurred the shadow.
    • 

  •  spread-radius: (optional) expands or contracts the size of the shadow.
    • 

  •  color: sets the color of the shadow.
    • 



Simple example



A subtle shadow effect


<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 200px;
  background: #f5f5f5;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>




In this example:


    

  •  The box is 150px by 150px with a light background.
    • 

  •  The shadow is offset by 2px right and 2px down.
    • 

  •  It has a blur radius of 5px.
    • 

  •  The color is a semi-transparent black.
    • 



Multiple shadows



You can combine multiple shadows by separating them with commas:


<!DOCTYPE html>
<html>
<head>
<style>
 .box-multiple {
  width: 200px;
  height: 200px;
  background: #fff;
  box-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.3),  /* first shadow */
    -2px -2px 5px rgba(0, 0, 0, 0.2); /* second shadow */
}
</style>
</head>
<body>
<div class="box-multiple">  </div>
</body>
</html>




Here, the element gets two shadows: one offset down-right and another offset up-left, creating a layered effect.


Inset shadow


By default, shadows are on the outside of an element. To create an inner shadow, use the inset keyword:


<!DOCTYPE html>
<html>
<head>
<style>
.box-inset {
  width: 200px;
  height: 200px;
  background: #fff;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="box-inset">  </div>
</body>
</html>




The inset keyword changes the shadow from outer to inner, creating a sunken effect.

                    

                    
		    
                    

                        
                        

				2 Views 
                            0 Comments 
                        

                        

                    

                    

                

                

                

                

                    

                        
Readers’ comment

                    

                    
                    
                    
                

                

                

                 
                    

                        
Log in to add a comment

                    


                    🔐 Access