Advanced Search

CSS Gradient Noise

/ Published in: CSS
Save to your folder(s)
CSS Gradient Noise

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  3.  
  4.  
  5. <style type="text/css">
  6.  
  7. body {
  8.   margin: 0;
  9.   padding: 0;
  10.   background: #999;
  11. }
  12.  
  13. .wrapper {
  14.   height: 400px;
  15.   overflow: hidden;
  16. }
  17.  
  18.  
  19. #footer {
  20. background: #A53E1F;
  21. background: url(noise.png)  repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
  22. background: url(noise.png)  repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D))  transparent;
  23. -webkit-transform: scale(1, 0.7) translate(0, -250px);
  24. -moz-transform: scale(1, 0.7) translate(0, -250px);
  25. height: 700px;
  26. width: 100%;
  27. }
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35. </style>
  36.  
  37. </head><body>
  38. <div class="wrapper">  
  39. <div id="footer">
  40.  
  41. </div>
  42. </div>
  43. </body></html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.