ADVERTISEMENT

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

Telegram Group Join Now

ADVERTISEMENT

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

CSS Box-Shadow
CSS Box-Shadow

 

ADVERTISEMENT

ADVERTISEMENT

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—

ADVERTISEMENT

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

ADVERTISEMENT

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👇

ADVERTISEMENT

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

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

1. horizontal-offset:-

ADVERTISEMENT

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.

ADVERTISEMENT

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:-

ADVERTISEMENT

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

ADVERTISEMENT

 5. Color:-

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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:-

<!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.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

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

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

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.

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT