Q:

How to apply shadow effect on elements using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  723 
Very Easy
0

How to apply shadow effect on elements using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS box-shadow property

You can use the CSS box-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on block-level elements. The box-shadow can be applied on both inside and outside of the element's box. Try out the following example to see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Box Shadow Effect</title>
<style>
    .box{
        width: 150px;
        height: 150px;
        background: #ccc;
        border: 1px solid #999;
    }
    .shadow-inside{
        -moz-box-shadow:    inset 0 0 10px #666; /* for gecko based browsers */
        -webkit-box-shadow: inset 0 0 10px #666; /* for webkit based browsers */
        box-shadow:         inset 0 0 10px #666;
    }
    .shadow-outside{
        -moz-box-shadow:    2px 2px 4px 2px #999;
        -webkit-box-shadow: 2px 2px 4px 2px #999;
        box-shadow:         2px 2px 4px 2px #999;
    }
    .shadow-outside-all{
        -moz-box-shadow:    0 0 6px 3px #999;
        -webkit-box-shadow: 0 0 6px 3px #999;
        box-shadow:         0 0 6px 3px #999;
    }
    .shadow-outside-bottom{
        -moz-box-shadow:    0 10px 5px -5px #999;
        -webkit-box-shadow: 0 10px 5px -5px #999;
        box-shadow:         0 10px 5px -5px #999;
    }
    .example{
        margin: 30px;
    }
</style>
</head> 
<body>
<div class="example">
    <h2>Box Shadow Inside</h2>
    <div class="box shadow-inside"></div>
    <br>
    <h2>Box Shadow Outside</h2>
    <div class="box shadow-outside"></div>
    <h2>Box Shadow Outside - Side All</h2>
    <div class="box shadow-outside-all"></div>
    <h2>Box Shadow Outside - Bottom Only</h2>
    <div class="box shadow-outside-bottom"></div>
    <br>
    <p><strong>Note:</strong> Experiment with the value to see how the box-shadow property works.</p>
</div>
</body>
</html>

Output:

Box Shadow Inside

 

 

Box Shadow Outside

 

Box Shadow Outside - Side All

 

Box Shadow Outside - Bottom Only

 

 

Note: Experiment with the value to see how the box-shadow property works.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now