Last Updated: February 25, 2016

CSS only container gradient overlay

Gradient overlay effect on any container without using images

.container {
 width: 100%;
 padding:100px 0;
 background-image: url("https://ununsplash.imgix.net/photo-1428279148693-1cf2163ed67d?fit=crop&fm=jpg&h=700&q=75&w=1050");
 background-position: center center;
 background-repeat: no-repeat;
 position: relative;
 background-size:cover;
}

.container::before {
 background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
 background: rgba(0, 0, 0, 0) -moz-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
 background: rgba(0, 0, 0, 0) -o-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
 background: rgba(0, 0, 0, 0) linear-gradient(to bottom right, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
 content: "";
 display: block;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

#css

#css3

#gradient

#overlay