Color Gradient Background c0a6d7 3e3158 776ea8 64437b 5c6069

Colors in use

Hex: #c0a6d7Copy

Hex: #3e3158Copy

Hex: #776ea8Copy

Hex: #64437bCopy

Hex: #5c6069Copy

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(192,166,215,.6), rgba(192,166,215,0) 70%),linear-gradient(144deg, rgba(62,49,88,.6), rgba(62,49,88,0) 70%),linear-gradient(216deg, rgba(119,110,168,.8), rgba(119,110,168,0) 70%),linear-gradient(288deg, rgba(100,67,123,.8), rgba(100,67,123,0) 70%),linear-gradient(360deg, rgba(92,96,105,.8), rgba(92,96,105,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(192,166,215,.6), rgba(192,166,215,0) 70%),linear-gradient(144deg, rgba(92,96,105,.8), rgba(92,96,105,0) 70%),linear-gradient(216deg, rgba(119,110,168,.8), rgba(119,110,168,0) 70%),linear-gradient(288deg, rgba(62,49,88,.6), rgba(62,49,88,0) 70%),linear-gradient(360deg, rgba(100,67,123,.8), rgba(100,67,123,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(92,96,105,.8), rgba(92,96,105,0) 70%),linear-gradient(144deg, rgba(62,49,88,.6), rgba(62,49,88,0) 70%),linear-gradient(216deg, rgba(100,67,123,.8), rgba(100,67,123,0) 70%),linear-gradient(288deg, rgba(192,166,215,.6), rgba(192,166,215,0) 70%),linear-gradient(360deg, rgba(119,110,168,.8), rgba(119,110,168,0) 70%);
}

                    
Copy

.gradient-background {
background: linear-gradient(72deg, rgba(100,67,123,.8), rgba(100,67,123,0) 70%),linear-gradient(144deg, rgba(62,49,88,.6), rgba(62,49,88,0) 70%),linear-gradient(216deg, rgba(119,110,168,.8), rgba(119,110,168,0) 70%),linear-gradient(288deg, rgba(92,96,105,.8), rgba(92,96,105,0) 70%),linear-gradient(360deg, rgba(100,67,123,.8), rgba(100,67,123,0) 70%);
}

                    
Copy

Simple Gradients


.gradient-background {
background: transparent linear-gradient(to left, #c0a6d7, #3e3158) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #c0a6d7, #776ea8) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #c0a6d7, #64437b) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #c0a6d7, #5c6069) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #3e3158, #776ea8) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #3e3158, #64437b) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #3e3158, #5c6069) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #776ea8, #64437b) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #776ea8, #5c6069) repeat scroll 0% 0%;
}

                    
Copy

.gradient-background {
background: transparent linear-gradient(to left, #64437b, #5c6069) repeat scroll 0% 0%;
}

                    
Copy

Visit Count:45

Similar Gradient