Example of CSS Gradient Effect Source Code

Example of CSS Gradient Effect Source Code

Helloo guys,Thank you For Visit my Blog  Share and Subscribe My blog.

My presonal Site visit  Jeel Bhatti




Download code Click Here:-- Download
.
Code:------>

HTML code with internal css

<html>
 <head>
  <title>Animated Gradient Shadow</title>
  <style type="text/css">
   *{
    margin:0;
    padding:0;
   }
   body{
    background: black;
   }
   .but{
    position:relative;
    margin:200px auto 0;
    width:400px;
    height:250px;
    background:linear-gradient(0deg,#000,#262626);
   }
   .but:before,after
   {
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ff0000,#ffff00,#fb0094,#0000ff,#00ff00,#ff0000,#ffff00);
    width:calc(100% + 4px);
    height:calc(100% + 4px);
    background-size:400%;
    z-index:-1;
    animation: animate 20s linear infinite;
   }
   .but:before
   {
    filter:blur(3px);
   }
   @keyframes animate
   {
    0%
    {
     background-position:0 0;
    }
    50%
    {
     background-position:300% 0;
    }
    100%
    {
     background-position:0% 0;
    }
   }
  </style>

 </head>
 <body>

  <div class="but">

    </div>



 </body>
</html>