4 Awesome CSS3 Gradient Textures Without Image

4 Awesome CSS3 Gradient Textures Without Image

Today I am going to share 4 awesome CSS3 technique to create excellent gradient textures without image. Don’t worry it’s very simple and you can use them easily any where in your website. CSS3 Gradient reduce page loading time and it’s look better then image texture. Just few lines of CSS3 codes and your gradient textures is ready to use.

Note: Remember CSS3 gradient supports only in modern browsers like- Mozilla Firefox, Google Chrome, Safari, Opera and IE10.

So let’s get started –

– HTML Snippets:

<div id="texture_1"></div>
<div id="texture_2"></div>
<div id="texture_3"></div>
<div id="texture_4"></div>

– 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;
}
Check Demo

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Total 0 Votes
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

One thought on “4 Awesome CSS3 Gradient Textures Without Image

  1. Pingback: How to create a triangle using CSS3 | Premium WordPress Themes and Plugins By xenioushk

Leave a Comment

Back To Top