Color Gradient Background 2e453c b5b399 578d83 73b6ac 78a4a6

Colors in use

Hex: #2e453cCopy

Hex: #b5b399Copy

Hex: #578d83Copy

Hex: #73b6acCopy

Hex: #78a4a6Copy

CSS Gradient


.gradient-background {
background: #1e5799; 
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); 
}

                    
Copy

Complex Gradients


.gradient-background {
background: linear-gradient(72deg, rgba(46,69,60,.6), rgba(46,69,60,0) 70%),linear-gradient(144deg, rgba(181,179,153,.6), rgba(181,179,153,0) 70%),linear-gradient(216deg, rgba(87,141,131,.8), rgba(87,141,131,0) 70%),linear-gradient(288deg, rgba(115,182,172,.8), rgba(115,182,172,0) 70%),linear-gradient(360deg, rgba(120,164,166,.8), rgba(120,164,166,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(46,69,60,.6), rgba(46,69,60,0) 70%),linear-gradient(144deg, rgba(120,164,166,.8), rgba(120,164,166,0) 70%),linear-gradient(216deg, rgba(87,141,131,.8), rgba(87,141,131,0) 70%),linear-gradient(288deg, rgba(181,179,153,.6), rgba(181,179,153,0) 70%),linear-gradient(360deg, rgba(115,182,172,.8), rgba(115,182,172,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(120,164,166,.8), rgba(120,164,166,0) 70%),linear-gradient(144deg, rgba(181,179,153,.6), rgba(181,179,153,0) 70%),linear-gradient(216deg, rgba(115,182,172,.8), rgba(115,182,172,0) 70%),linear-gradient(288deg, rgba(46,69,60,.6), rgba(46,69,60,0) 70%),linear-gradient(360deg, rgba(87,141,131,.8), rgba(87,141,131,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(115,182,172,.8), rgba(115,182,172,0) 70%),linear-gradient(144deg, rgba(181,179,153,.6), rgba(181,179,153,0) 70%),linear-gradient(216deg, rgba(87,141,131,.8), rgba(87,141,131,0) 70%),linear-gradient(288deg, rgba(120,164,166,.8), rgba(120,164,166,0) 70%),linear-gradient(360deg, rgba(115,182,172,.8), rgba(115,182,172,0) 70%);
}

                    
Copy

Simple Gradients


.gradient-background {
background: transparent linear-gradient(to left, #2e453c, #b5b399) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #2e453c, #578d83) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #2e453c, #73b6ac) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #2e453c, #78a4a6) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #b5b399, #578d83) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #b5b399, #73b6ac) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #b5b399, #78a4a6) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #578d83, #73b6ac) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #578d83, #78a4a6) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #73b6ac, #78a4a6) repeat scroll 0% 0%;
}

                    
Copy

Visit Count:36

Similar Gradient