This content originally appeared on DEV Community and was authored by Stackfindover
Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create a gradient drop shadow
Common Query
- How to create a gradient drop shadow
- How to an awesome drop shadow
- How to create a drop shadow
See Also :- How to create a animated button
How to create gradient drop shadow step by step
First, we need to create two files index.html and style.css then we need to do code for it.
Step:#1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to create gradient shadow css</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="box">
<h1>Stackfindover</h1>
</div>
</body>
</html>
Step:#2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: #f2f4f6;
}
.box {
position: relative;
width: 320px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to top left, #0400ff, #ff3d00);
border-radius: 10px;
}
h1 {
color: #fff;
}
.box:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
transform: translateY(20px) scale(0.95);
filter: blur(20px);
opacity: 0.7;
transition: opacity 0.3s;
}
.box:hover:before {
opacity: 1;
}
How to create gradient drop shadow video output:
How to create gradient drop shadow Codepen Output:
We will update soon:)
This content originally appeared on DEV Community and was authored by Stackfindover
Stackfindover | Sciencx (2021-04-26T14:42:07+00:00) How to create a gradient drop shadow. Retrieved from https://www.scien.cx/2021/04/26/how-to-create-a-gradient-drop-shadow/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.