9+ CSS box-shadow Examples

This post contains a total of 9+ CSS box-shadow Examples with Source Code. All these box-shadow examples are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS box-shadow Examples

1. Css3 Box Shadow Effects

Made by Riccardo Tartaglia. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico:400,700);
body{
  background-color:#ccc;
}
h1{
  text-align:center;
  color:#444;
  font-family: 'Pacifico', cursive;
  text-shadow: 3px 2px 6px rgba(150, 150, 150, 1);
}
.box h3{  
    text-align:center;  
    position:relative;  
    top:60px;
    font-size:3em;
    color:#333;
}  
.box {  
    font-family: 'Open Sans', sans-serif;
    width:800px;  
    height:200px;  
    background:#FFF;  
    margin:40px auto;  
}  

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{  
    -webkit-box-shadow: 0 10px 6px -6px #777;  
    -moz-box-shadow: 0 10px 6px -6px #777;  
     box-shadow: 0 10px 6px -6px #777;  
}  

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2  
{  
  position: relative;  
}  
.effect2:before, .effect2:after  
{  
  z-index: -1;  
  position: absolute;  
  content: "";  
  bottom: 15px;  
  left: 10px;  
  width: 50%;  
  top: 80%;  
  max-width:300px;  
  background: #777;  
 
  box-shadow: 0 15px 10px #777;  

  transform: rotate(-3deg);  
}  
.effect2:after  
{  
  transform: rotate(3deg);  
  right: 10px;  
  left: auto;  
}  

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect4:before, .effect4:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect4:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect5:before, .effect5:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
</style>
</head>
<body>
  <h1>CSS Box Shadow Effects</h1>
<div class="box effect1">
  <h3>Effect 1</h3>
</div>
<div class="box effect2">
  <h3>Effect 2</h3>
</div>
<div class="box effect3">
  <h3>Effect 3</h3>
</div>
<div class="box effect4">
  <h3>Effect 4</h3>
</div>
<div class="box effect5">
  <h3>Effect 5</h3>
</div>
</body>
</html>

2. Button Shadow

Made by Sebastian. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<style>
html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}
</style>
</head>
<body>
  <div class="wrap">
  <button class="button">Submit</button>
</div>
</body>
</html>

3. Soft Box Shadow Effects

Made by TakoTako. Source

Soft Box Shadow Effects
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #f3f4f6;
}
.box {
	position: relative;
	width: 250px;
	height: 250px;
	margin: 25px;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	
	background: #f3f4f6;
	box-shadow: -15px -15px 15px rgba(255,255,255,0.5),
				15px 15px 15px rgba(0,0,0,0.05);
}
.box:nth-child(2){
	box-shadow: -15px -15px 15px rgba(255,255,255,0), /*ใ“ใ‚Œ่ฆใ‚‹ใฎ๏ผŸ๏ผŸ*/
				15px 15px 15px rgba(0,0,0,0),
				inset 4px 4px 5px rgba(255,255,255,0.8),
				inset -4px -4px 5px rgba(0,0,0,0.05),
				0 50px 40px rgba(0,0,0,0.05);
}
.box img {
	max-width: 160px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2013/png/iconmonstr-beer-9.png&r=44&g=167&b=171" alt="">
		</div>
		<div class="box">
			<img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2013/png/iconmonstr-beer-9.png&r=44&g=167&b=171" alt="">
		</div>
	</div>
</body>
</html>

4. A4 CSS page template

Made by rafaelcastrocouto. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="landscape"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="landscape"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
</style>
</head>
<body>
  <page size="A4"></page>
<page size="A4"></page>
<page size="A4" layout="landscape"></page>
<page size="A5"></page>
<page size="A5" layout="landscape"></page>
<page size="A3"></page>
<page size="A3" layout="landscape"></page>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

5. Box shadow only bottom

Made by Thang Kieu. Source

Box shadow only bottom
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.wrapper {
  margin: 90px 0;
  display: flex;
}

.shadow {
  width: 100px;
  margin: 0 auto;
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px;
}
.shadow.top {
  box-shadow: 0px -15px 10px -15px #111;
}
.shadow.bottom {
  box-shadow: 0px 15px 10px -15px #111;
}
.shadow.left {
  box-shadow: -15px 0px 10px -15px #111;
}
.shadow.right {
  box-shadow: 15px 0px 10px -15px #111;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="shadow top">Top</div>
  <div class="shadow bottom">Bottom</div>
  <div class="shadow left">Left</div>
  <div class="shadow right">Right</div>
</div>
</body>
</html>

6. box-shadow effects

Made by Akash bhandwalkar. Source

box-shadow effects
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
    margin: 0;
    padding: 0;
}


body {
    background: #00bdb4;
    font-family: sans-serif;
}


.container {
    width: 100%;
    display: flex;
    margin: 50px auto;
}

.card {
    background: white;
    padding: 80px 40px;
    margin: 0 30px;
    font-family: sans-serif;
    color: rgba(0,0,0,0.2);
    font-size: 24px;
    position: relative;
    width: 300px;
}

.one {
    box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3);
}

.two:before {
    /* box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3); */
    content: "";
    position: absolute;
    bottom: 5px;
    left: 10%;
    width: 90%;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    transform: skewY(5deg);
    transform-origin: left;
    z-index: -1;
    filter: blur(2px);
}


.three:before {
    /* box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3); */
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 90%;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    transform: skewY(-7deg);
    transform-origin: right;
    z-index: -1;
    filter: blur(2px);
}

.four:after {
    /* box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3); */
    content: "";
    position: absolute;
    bottom: -50px;
    left: 5%;
    width: 90%;
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    /* transform: skewY(-7deg); */
    /* transform-origin: right; */
    filter: blur(10px);
    border-radius: 50%;
    z-index: -1;
}


.six {
    background:  #00bdb4;
    border-radius: 15px;
    box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
                15px 15px 15px rgba(0,0,0,0.1);
}


.seven {
    background:  #00bdb4;
    border-radius: 15px;
    box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
                15px 15px 15px rgba(0,0,0,0.1),
                inset -50px -50px 50px rgba(255, 255, 255, 0.2),
                inset 50px 50px 50px rgba(0,0,0,0.1);
}

.seven:hover {
    background:  mediumpurple;
    border-radius: 15px;
    box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
                15px 15px 15px rgba(180, 62, 62, 0.1);
}
</style>
</head>
<body>
  <div class="container">
        <div class="card one">
            shadow 1
        </div>
        <div class="card two">
            shadow 2
        </div>
        <div class="card three">
            shadow 3
        </div>
        <div class="card four">
            shadow 4
        </div>
      
    </div>
    <div class="container">
        <div class="card six">
            shadow 5
        </div>
        <div class="card seven">
            shadow 6
        </div>
        
        <div class="card shadow1"></div>
    </div>
</body>
</html>

7. Box shadow effects for beginner

Made by rahul kaklotar. Source

Box shadow effects for beginner
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*{
  margin:0;padding:0;box-sizing:border-box;background:whitesmoke;
}
.container{
  margin:auto;
  padding:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.container div{
  width:200px;
  height:100px;
  border-radius:20px;
  
}
.b11{
   box-shadow: 0 20px 50px rgba(59, 43, 91, 0.7);
}
.b22{
  box-shadow: 0 20px 50px rgba(240, 46, 170, 0.7);
}
.b33{
    box-shadow: 0 20px 50px rgba(8, 112, 184, 0.7);
}
.b44{
  box-shadow: 0px 10px 1px #ddd, 0 10px 20px #ccc;
}
.b55{
    box-shadow: -10px -10px 30px 4px rgba(0,0,0,0.1),
              10px 10px 30px 4px rgba(45,78,255,0.15);
}





/*extra box shadow*/
.b111{
  box-shadow: 5px 5px rgba(0, 98, 90, 0.4),
              10px 10px rgba(0, 98, 90, 0.3),
              15px 15px rgba(0, 98, 90, 0.2),
              20px 20px rgba(0, 98, 90, 0.1),
              25px 25px rgba(0, 98, 90, 0.05);
}

.b222{
  box-shadow: 0 5px rgba(93, 64, 55, 0.4), 0 10px rgba(93, 64, 55, 0.3),
              0 15px rgba(93, 64, 55, 0.2), 0 20px rgba(93, 64, 55, 0.1),
              0 25px rgba(93, 64, 55, 0.05),
              -5px 5px 40px rgba(100, 0, 0, 0.4);
}

.b333{
   box-shadow: 5px 5px rgba(0, 98, 90, 0.4),
              10px 10px rgba(0, 98, 90, 0.3),
              15px 15px rgba(0, 98, 90, 0.2),
              20px 20px rgba(0, 98, 90, 0.1),
              25px 25px rgba(0, 98, 90, 0.05);
}
.b444{
    box-shadow: 0 -20px 15px -10px rgba(255, 255, 0, 0.3) inset,
              0 20px 15px -10px rgba(255, 255, 0, 0.3) inset,
              0 0 10px rgba(0, 0, 0, 0.1);
}
.b555{
  box-shadow: inset -12px -8px 35px #464646;

}
</style>
</head>
<body>
  <div class="container">
  <div class="b1 b11"></div>
  <br>
  <div class="b1 b22"></div>
  <br>
  <div class="b1 b33"></div>
  <br>
  <div class="b1 b44"></div>
  <br>
  <div class="b1 b55"></div>
  <br>
</div>
<!-- extra box shadow -->
<div class="container">
  <div class="b1 b111"></div>
  <br>
  <div class="b1 b222"></div>
  <br>
  <div class="b1 b333"></div>
  <br>
  <div class="b1 b444"></div>
  <br>
  <div class="b1 b555"></div>
  <br>
</div>
</body>
</html>

8. CSS Box Shadow Effects

Made by kiran raj r. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  background: #fff;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.box {
  width: 240px;
  margin: 50px;
  height: 100px;
  position: relative;
  background: #ffd670;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 200ms ease;
}

/* ==== Box 1 ==== */
.box1 {
  background: #d9ed92;
}

.box1:before,
.box1:after {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 20px;
  left: 10px;
  top: 25px;
  width: 50%;
  box-shadow: 0 20px 15px #52b69a;
  transform: rotate(-8deg);
}
.box1:after {
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/* ==== Box 2 ==== */
.box2:before,
.box2:after {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 15px;
  left: 10px;
  top: 25px;
  width: 50%;
  box-shadow: 0 15px 10px #333;
  transform: rotate(-5deg);
}
.box2:after {
  transform: rotate(5deg);
  right: 10px;
  left: auto;
}

/* ==== Box 3 ==== */
.box3:before {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 15px;
  left: 10px;
  top: 25px;
  width: 50%;
  box-shadow: 0 15px 10px #333;
  transform: rotate(-5deg);
}

/* ==== Box 4 ==== */
.box4:before {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 15px;
  right: 10px;
  top: 25px;
  width: 50%;
  box-shadow: 0 15px 10px #333;
  transform: rotate(6deg);
}

/* ==== Box 5 ==== */
.box5 {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.2),
    0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2);
}

/* ==== Box 6 ==== */
.box6 {
  background: #f9c80e;
  box-shadow: 0 0 0 5px #ea3546, 0 0 0 10px #fff, 0 0 0 15px #f86624,
    0 0 0 20px #fff, 0 0 0 25px #43bccd;
}

/* ==== Box 7 ==== */
.box7 {
  background: #00b4d8;
  box-shadow: 0 -20px 0 -10px #0096c7, 0 -40px 0 -20px #0077b6,
    0 -60px 0 -30px #023e8a, 0 -80px 0 -40px #03045e;
}

/* ==== Box 8 ==== */
.box8 {
  box-shadow: 20px 20px;
}

/* ==== Box 9 ==== */
.box9 {
  box-shadow: 10px 10px #ffb703, -10px -10px #fb8500;
}

/* ==== Box 10 ==== */
.box10 {
  box-shadow: 0px 15px 15px -10px #ea3546;
}

/* ==== Box 11 ==== */
.box11 {
  box-shadow: 0px 15px 15px -10px #ef476f, 0px -15px 15px -10px #ef476f,
    15px 0px 15px -15px #06d6a0, -15px 0px 15px -15px #06d6a0;
}

/* ==== Box 12 ==== */
.box12 {
  box-shadow: #ef476f 0px 0px 0px 2px inset, #fff 10px -10px 0px -3px,
    #06d6a0 10px -10px, #fff 20px -20px 0px -3px, #118ab2 20px -20px,
    #fff 30px -30px 0px -3px, #8338ec 30px -30px;
}

/* ==== Box 13 ==== */
.box13 {
  background: rgba(131, 56, 236, 0.9);
  box-shadow: rgba(131, 56, 236, 0.7) 5px 5px, rgba(131, 56, 236, 0.5) 10px 10px,
    rgba(131, 56, 236, 0.3) 15px 15px, rgba(131, 56, 236, 0.1) 20px 20px;
}

/* ==== Box 14 ==== */
.box14 {
  box-shadow: #aaa 1px 1px 5px inset, #fff 0 0 inset;
}

/* ==== Box 15 ==== */
.box15 {
  background: #00f5d4;
  box-shadow: 20px 20px #9b5de5, -20px -20px #00bbf9, 20px -20px #fee440,
    -20px 20px #f72585;
}

/* ==== Box 16 ==== */
.box16 {
  box-shadow: -10px 0px 10px -5px #ea3546, 10px 0px 10px -5px #ea3546;
}

/* ==== Box 17 ==== */
.box17 {
  box-shadow: 5px 10px 20px 2px rgba(0, 0, 0, 0.1);
}

/* ==== Box 18 ==== */

.box18 {
  background: #fff;
  border: 2px solid rgba(50, 50, 93, 0.2);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.box19 {
  width: 150px;
  height: 150px;
  background-color: #43bccd;
  box-shadow: 10px -10px #ea3546;
  border-radius: 150px;
}

.box20 {
  background: #fff;
  border-radius: 10px;
  box-shadow: -10px -10px 30px 2px #ff0054, 10px 10px 30px 2px #fc2f00;
}

.box21 {
  color: #fff;
  background: #666;
  box-shadow: 0 0 15px 5px #0aefff;
}

.box22 {
  width: 150px;
  height: 150px;
  background-color: #fff;
  box-shadow: 10px -10px #f5b700, -10px 10px #008bf8, 10px 10px #dc0073,
    -10px -10px #04e762;
  border-radius: 150px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
  <div class="box box11">11</div>
  <div class="box box12">12</div>
  <div class="box box13">13</div>
  <div class="box box14">14</div>
  <div class="box box15">15</div>
  <div class="box box16">16</div>
  <div class="box box17">17</div>
  <div class="box box18">18</div>
  <div class="box box19">19</div>
  <div class="box box20">20</div>
  <div class="box box21">21</div>
  <div class="box box22"></div>
</div>
</body>
</html>

9. Awesome Shadows

Made by Chris Neikirk. Source

Awesome Shadows
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Coda:400,800);
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);

body {
  height:100%;
  font-family: 'Hind', sans-serif;
}

.container {
  width:100%;
  height:100%;
}

h1,h2,h3,h4,h5 {
  margin:0;
}

h1{
  padding-top:50px;
  font-size:50px;
  font-weight: 700;
  text-align:center;
  text-transform:uppercase;
  color:#777;
  line-height:60px;
}

h1 span {
  color: #e3e3e3;
  font-size:70px;
  text-shadow: 0 -3px 0px #fff, 0px 4px 8px rgba(0,0,0,0.35), 0px 3px 30px rgba(0,0,0,0.15);
}

hr.cool-separator {
  height: 1px;
  background: white;
  border: none;
  outline: none;
  margin: 4em auto 4em;
  position: relative;
  background-image: -webkit-linear-gradient(right, #777, #fff, #777);
  background-image: linear-gradient(to left, #777, #fff, #777);
  text-transform: capitalize;
}

hr.cool-separator:before {
  color: #777;
  font-weight: 700;
  content: attr(data-symbol);
  position: absolute;
  top: 0;
  left: 50%;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 2em;
  padding: 0.5em 3em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.text-container {
  display: block;
  text-align:center;
  font-size: 50px;
  font-weight: 700;
  text-align:center;
  text-transform:uppercase;
  margin:0 auto;
  width: 30%;
  height: auto;
}

.underline {
  font-size:40px;
  text-decoration: underline;
}

/* Stroke Effect */
.stroke-1{
  color: #eee;
  text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.stroke-2{
  color: #fff;
  text-shadow:
     -1px -1px 0 #777,  
      1px -1px 0 #777,
      -1px 1px 0 #777,
       1px 1px 0 #777;
}

/* 3D Effect */
.threeD-1{
  color: #fff;
  text-shadow:
    0px 2px 0px #777,
    0px 5px 10px rgba(0,0,0,0.15),
    0px 10px 2px rgba(0,0,0,0.1),
    0px 15px 30px rgba(0,0,0,0.1);   
}
.threeD-2{
  color: #fff;
  text-shadow:
    0 1px 0 #777,
    0 -1px 1px #eee,
    0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}
.threeD-3 {
  color:#fff;
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}

.threeD-4 {
  color:#ccc;
  text-shadow: 
    0 -2px 0px #fff, 
    0px 2px 4px rgba(0,0,0,0.35), 
    0px 3px 15px rgba(0,0,0,0.15);
}



/***************************
****************************
footer animation
****************************
***************************/
footer {
  font-family: "bitter", san-serif;
  display:block;
  overflow:hidden;
  width:100%;
  position: fixed;
  text-align:center;
  bottom: 0px;
}

footer h4 {
  font-family: 'coda', cursive;
  font-size:1.5em;
  color:#fff;
  text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

footer h4 span{
  font-family: "bitter", san-serif;
}

.footer-container {
  position:relative;
  padding:15px 0;
  bottom:-120px;
  background-color: #e3e3e3;
  transition: all .5s ease-in-out;
}

footer:hover .footer-container {
  bottom:0px;
}

.f-svg {
  display: block;
  width: 50px;
  height: 20%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.small-o {
  position: relative;
  font-size:10px;
  text-decoration: underline;
  top:-6px;
  
}

/***************************
****************************
Main SVG CSS
****************************
***************************/
</style>
</head>
<body>
  <div class="container">
  <h1>Awesome<br><span>shadows</span></h1>
  <!--Stroke Effects-->
  <hr width="50%" class="cool-separator" data-symbol="Stroke effects">
  
  <div class="text-container stroke-1">
    N<span class="underline"><sup>o</sup></span> 1
  </div>
  <div class="text-container stroke-2">
    N<span class="underline"><sup>o</sup></span> 2
  </div>
  
   <!--3d Effects-->
  <hr width="50%" class="cool-separator" data-symbol="3D effects">
  
  <div class="text-container threeD-1">
    N<span class="underline"><sup>o</sup></span> 1
  </div>
  <div class="text-container threeD-2">
    N<span class="underline"><sup>o</sup></span> 2
  </div>
  <div class="text-container threeD-3">
    N<span class="underline"><sup>o</sup></span> 3
  </div>
  <div class="text-container threeD-4">
    N<span class="underline"><sup>o</sup></span> 4
  </div>
  
  <footer>
    <div class="f-svg">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.4 21.5">
  <defs>
    <style>
      #pen {fill:#e3e3e3;}
    </style>
  </defs>
  <g id="pen">
    <path d="M18 1.3h11.4v1.3H18zm10 3h-8.7l-2.5 7.3 6.4 10v-7.8A1.7 1.7 0 0 1 22 12a1.8 1.8 0 1 1 3.6 0 1.7 1.7 0 0 1-1.4 1.8v7.7l6.4-10z" id="Pen-2" data-name="Pen"/>
    <path d="M11.4 0l1.2 1.5-9.6 9 9.6 9-1.2 1.4L0 10zm36 10.4L36 21l-1.2-1.6 9.7-9-9.7-9L36 0z" id="brackets"/>
  </g>
</svg>
    </div>  
    <div class="footer-container">
      <h4><span>@</span>N3IKIRK</h4>
      <hr style="width:75%">
      <div>pen N<span class="small-o">o</span> 2</div>
    </div>
  </footer>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
</body>
</html>

10. 3d button box shadow

Made by Devtips. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  text-align: center;
  padding: 200px;
}

.button {
  display: inline-block;
  background: #4285f4;
  color: #fff;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all ease-in-out 300ms;
}
.button:hover {
  box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
  transform: translate(0px, -10px) scale(1.2);
}
</style>
</head>
<body>
  <div class="button">This is a button</div>
</body>
</html>