Box-shadow CSS
It is used to add box shadow-like effects around the frame of an element, specify the horizontal and the vertical shadow.
Example:
<!DOCTYPE html> <html> <head> <title>CSS box-shadow Property</title> <style> div { border: 1px solid; padding: 10px; } #hvb { /* box-shadow: h-offset v-offset blur */ box-shadow: 5px 10px 10px; } #spr { /* box-shadow: h-offset v-offset blur spread */ box-shadow: 5px 10px 10px 10px; } #col { /* box-shadow: h-offset v-offset blur spread color */ box-shadow: 5px 10px 10px 10px pink; } #ins { /* box-shadow: h-offset v-offset blur spread color inset */ box-shadow: 5px 10px 10px 10px pink inset; } </style> </head> <body> <div id = "hvb"> <h1> h-offset, v-offset and blur attributes.</h1> </div> <br><br> <div id = "spr"> <h1> Includes the spread attribute.</h1> </div> <br><br> <div id = "col"> <h1> Includes the color attribute.</h1> </div> <br><br> <div id = "ins"> <h1> Includes the inset attribute.</h1> </div> <br><br> </body> </html>
OUTPUT: