How to create gradient drop shadow

April 25, 2021

Rahul

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create gradient drop shadow

Common Query

How to create an gradient drop shadow
How to an awesome drop shadow
How to create 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 https-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: Watch Now

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment Cancel reply