4 Awesome CSS3 Gradient Textures Without Image

4 Awesome CSS3 Gradient Textures Without Image

Today I’m 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.

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

So let’s get started –

awesome css3 gradient texture without image

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

DemoDownload

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!

Advertisement

Tags:  

Share It

Related Posts