4 Awesome CSS3 Gradient Textures Without Image

• Today I'm going share 4 awesome CSS3 technique to gradient textures without image. You can use them easily any where in your website. CSS3 Gradient reduce page loading time and it's look better then image texture. Enjoy.

  

  - CSS3 For Gradient Texture:

  div{
      width:700px;
      height:150px;
      border-radius:5px;
      margin:15px auto;
  }
  
  /* Gradient */
  
  #texture_1{
      background-image: -moz-linear-gradient(90deg, #e07a1e, #e07a1e 2px, #f9cf90 2px, #f9cf90 4px, #e07a1e 4px);
      background-image: -webkit-linear-gradient(90deg, #e07a1e, #e07a1e 2px, #f9cf90 2px, #f9cf90 4px, #e07a1e 4px);
      background-repeat: repeat;
      background-size: 2px 4px;
  }
  
  #texture_2{
      background-image: -moz-linear-gradient(0deg, #b6221b, #b6221b 2px, #c7221b 2px, #c7221b 4px, #b6221b 4px);
      background-image: -webkit-linear-gradient(0deg, #b6221b, #b6221b 2px, #c7221b 2px, #c7221b 4px, #b6221b 4px);
      background-repeat: repeat;
      background-size: 5px 10px;
  }
  
  #texture_3{
      background-image: -moz-linear-gradient(90deg, #46b641, #46b641 15px, #308733 15px, #308733 30px, #46b641 30px);
      background-image: -webkit-linear-gradient(90deg, #46b641, #46b641 15px, #308733 15px, #308733 30px, #46b641 30px);
      background-repeat: repeat;
      background-size: 15px 30px;
  }
  
  #texture_4{
      background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25)), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25));
      background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25)), -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25));
      background-position: 0 0pt, 2px 2px;
      background-size: 4px 4px;
      background-color: #202125;
  }

   

  Demo

  Download

Publish your snippets with us & be an exclusive author!

• Total View: 1033 time(s)
• Script Upload Date: 2012-07-26