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>