4 Awesome CSS3 Gradient Textures Without Image

Hello friends, today I’m going to share 4 awesome CSS3 technique to create awesome 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 code and your gradient textures is ready to use. So let’s get started –

– 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

Enjoy!