Try it yourself editor

Online Code Editor [-OCE-]

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
  @import url('https://font.googleapis.com/css?family=popins:100,200,300,400,500,600,700,800,900');

*{
   font-family: 'poppins',sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body
{
   background: #0e1538;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
.box
{
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;  
  display: flex;
  justify-content: center;
  align-items: center;  
}
.box::before
{
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    transform: skewX(3deg) skewY(6deg);
    background: linear-gradient(315deg,#00ccff,#0e1538,#d400d4);
}

.box::after
{
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    transform: skewX(3deg) skewY(6deg);
    background: linear-gradient(315deg,#00ccff,#0e1538,#d400d4);
    filter: blur(50px);
}
.box span
{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e1538;
    z-index: 10;
}
.box h2
{
    position: relative;
    z-index: 12;
    color:  #fff;
    font-size: 6em;
}
  </style>
</head>
<body>  
    <div class="box">
        <span></span>
        <h2>Code <br>
            Verse</h2>
    </div>
</body>
</html>

Output

CodeVerse Projects

Search This Blog

#3 Gradient Colour Try it your self [-OCE-]

Online Code Editor [-OCE-]

Comments

Post a Comment