CSS Box-Shadow

What is CSS Box-Shadow ? How to Create CSS Box-Shadow

What is CSS Box-Shadow ? How to Create CSS Box-Shadow

CSS Box-Shadow
CSS Box-Shadow

 

What is the Box-Shadow in CSS? This is a question asked by many developers who are new to web development they heard this term frequently means this property plays an important role while styling in CSS.

By the end of this blog after reading, you can answer the question that what is Box-shadow property in CSS How to implement it, and also the measures taken while applying this property? We will learn it through examples and codes so that it will be easy to visualize. Let’s get started—

Hey Learners, Box-Shadow is a styling property that gives shadow to the container.

box-shadow: none;

It is a default value .so if you apply it or not it is always applied.no effect of adding it. the styling before and after will be the same.

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
   <style>  
     body{  
       display: flex;  
       justify-content: center;  
       align-items: center;  
 width:100vw;  
 height: 100vh;  
     }  
     .btn{  
       padding:20px;  
       color:black;  
       background-color: aqua;  
       border-radius: 5px;
box-shadow:none; }  
   </style>  
 </head>  
 <body>  
   <div class="btn">Click</div>  
 </body>  
 </html>

Output👇

What is CSS Box-Shadow ? How to Create CSS Box-Shadow

 box-shadow:horizontal-offset vertical-offset blur spread color.

1. horizontal-offset:-

Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.

2. vertical-offset:-

Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.

3. blur:-

Optional. The blur radius. The higher the number, the more blurred the shadow will be

4. spread:-

Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow

 5. Color:-

Optional. The color of the shadow. The default value is the text color. You can give color in any format like RGB, hex code,rgba , HSL, or hsla.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

For Example purpose, I have inserted a live server of codepen you can click on it and check the code and how I used different methods for box-shadow.

Output👇

The code for the above live server is below:-

ADVERTISEMENT

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
            }
            .btn {
                padding: 20px;
                color: black;
                background-color: aqua;
                border-radius: 5px;
                margin: 20px;
            }
            .btn0 {
                box-shadow: 10px 10px;
            }
            .btn1 {
                box-shadow: 10px 10px 5px;
            }
            .btn2 {
                box-shadow: 10px 10px 5px 5px;
            }
            .btn3 {
                box-shadow: 10px 10px 5px 5px rgb(255, 0, 0);
            }
            .btn4 {
                box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>
    <body>
        <div class="btn btn0">Click</div>
        <div class="btn btn1">Click</div>
        <div class="btn btn2">Click</div>
        <div class="btn btn3">Click</div>
        <div class="btn btn4">Click</div>
    </body>
</html>

box-shadow:horizontal-offset vertical-offset blur spread color inset.

ADVERTISEMENT

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

ADVERTISEMENT

#Inset is used when you want to give a shadow but not outside it should be inside.#

ADVERTISEMENT

I have inserted a live server for the same below👇:-

ADVERTISEMENT

Code for the same below:-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
            }
            .btn {
                padding: 20px;
                color: black;
                background-color: aqua;
                border-radius: 5px;
                margin: 20px;
            }
            .btn0 {
                box-shadow: 10px 10px inset;
            }
            .btn1 {
                box-shadow: 10px 10px 5px inset;
            }
            .btn2 {
                box-shadow: 10px 10px 5px 5px inset;
            }
            .btn3 {
                box-shadow: 10px 10px 5px 5px rgb(255, 0, 0) inset;
            }
            .btn4 {
                box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.5) inset;
            }
        </style>
    </head>
    <body>
        <div class="btn btn0">Click</div>
        <div class="btn btn1">Click</div>
        <div class="btn btn2">Click</div>
        <div class="btn btn3">Click</div>
        <div class="btn btn4">Click</div>
    </body>
</html>

For Multiple shadows for a container, you have to use commas as a separator between two shadow properties.

10+ Javascript Projects For Beginners With Source Code

Code:-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
            }
            .btn {
                padding: 20px;
                color: black;
                background-color: aqua;
                border-radius: 5px;
                margin: 20px;
            }
            .btn0 {
                box-shadow: 10px 10px inset, 10px 10px 5px 5px;
            }
            .btn1 {
                box-shadow: 10px 10px 5px inset, -5px -5px 5px 5px red inset;
            }
            .btn2 {
                box-shadow: 10px 10px 5px 5px, -5px -5px 5px 5px green;
            }
            .btn3 {
                box-shadow: 10px 10px 5px 5px rgb(255, 0, 0), 20px 20px yellow;
            }
            .btn4 {
                box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.5) inset,
                    -5px -10px inset;
            }
        </style>
    </head>
    <body>
        <div class="btn btn0">Click</div>
        <div class="btn btn1">Click</div>
        <div class="btn btn2">Click</div>
        <div class="btn btn3">Click</div>
        <div class="btn btn4">Click</div>
    </body>
</html>

I hope hoped loved this blog and learned many things at the place please let us know your review in the comment section if you liked it please comment below as it will give us the motivation to create more blogs.

25+ Web Developer Portfolios Including Jack Jeznach

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

Written by @Himanshu Singh.



Leave a Reply