Box Shadow Effects

Developer
Retrofuturistic
Size
2,143 Kb
Views
6,072
  1. Box Shadow Effects Previews
  2. Box Shadow Effects HTML Codes
  3. Box Shadow Effects CSS Codes

How do I make an box shadow effects?

Raised, Curves and Bulges using css box shadow, border radius and transforms.. What is a box shadow effects? How do you make a box shadow effects? This script and codes were developed by Retrofuturistic on 19 January 2023, Thursday.

Box Shadow Effects Previews
IQ Test

Box Shadow Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Box Shadow Effects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Box Shadow Effects</h1>
<div class="box effect1"> <h3>Raised Effect</h3>
</div>
<div class="box effect2 orange"> <h3>Center Curved</h3>
</div>
<div class="box effect3 seafoam"> <h3>Vertical Bulge</h3>
</div>
<div class="box effect4 lemon"> <h3>Horizontal Bulge</h3>
</div>
</body>
</html>

Box Shadow Effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700);
body { background:rgb(212,205,182); font-family: 'Playfair Display', serif;
}
.box h3 { text-align: center; position:relative; line-height:150px;
}
.box { margin:40px auto; width:40%; height:150px; background:-webkit-linear-gradient(left, #e2e1e0 0%,#ffffff 42%,#ffffff 52%,#e2e1e0 100%)
}
.box.orange { background:-webkit-linear-gradient(left, #fba721 0%,#ffdba7 42%,#ffdba7 52%,#fba721 100%)
}
.box.seafoam { background:-webkit-linear-gradient(left, #6fada0 0%,#b6e4da 42%,#b6e4da 52%,#6fada0 100%)
}
.box.lemon { background:-webkit-linear-gradient(top, #efec23 0%,#f4f9c1 45%,#f4f9c1 55%,#efec23 100%);
}
.effect1 { -webkit-box-shadow: 0 10px 6px -6px #777;
}
.effect2 { position:relative;
}
.effect2:before, .effect2:after { z-index: -1; position:absolute; content:''; bottom:13px; left:2px; top:80%; width:50%; max-width:300px; background:#777; -webkit-box-shadow: 0 15px 5px rgba(0,0,0,0.7); -webkit-transform: rotate(-3deg);
}
.effect2:after{ -webkit-transform: rotate(3deg); right:2px; left:auto;
}
.effect3 { position:relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect3:before, .effect3:after{ z-index: -1; position:absolute; content: ''; bottom:0px; top:0px; left:10px; right:10px; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3); border-radius:100px/10px;
}
.effect3:after { right:50px; left:auto; -webkit-transform: skew(8deg) rotate(3deg);
}
.effect4 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
}
.effect4:before, .effect4:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 30px rgba(0,0,0,0.4); top:20px; bottom:20px; left:0; right:0; border-radius:100px / 10px;
}
Box Shadow Effects - Script Codes
Box Shadow Effects - Script Codes
Home Page Home
Developer Retrofuturistic
Username retrofuturistic
Uploaded January 19, 2023
Rating 3
Size 2,143 Kb
Views 6,072
Do you need developer help for Box Shadow Effects?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Retrofuturistic (retrofuturistic) Script Codes
Name
CSS-Centered Modal Window
Expandable Left Side Bar with jQuery animate
A Pen by retrofuturistic
Country List with Pagination
Slide Toggle Menu
Responsive Cards Layout
Responsive Horizontally Centered Cards
Nonresponsive Cards
Responsive Skew
Inverted Border Radius Sidebar
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!