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