foto html - css     . Allerlei - Gradient background

Een achtergrond met meer kleuren hoeft helemaal niet met een plaatje, het kan ook met css. Hieronder zie je wat je kan doen met css en de css er bij

.grad1 {
color:#003; background: linear-gradient(to bottom, #09F, #003);}
   

.grad2 {
color:#003; background: linear-gradient(to right, #09F, #003);}
   

.grad3 {
color:#003; background:linear-gradient( 45deg, #09F, #003);}
   

.grad4 {
color:#003; background: linear-gradient(to left top, #09F,gold);}
   

.grad5 {
color:#003; background: linear-gradient(90deg, #09F, #003 50%, #CFF);}
   

.grad6 {
color:#003; background:radial-gradient(150px circle, #09F, #003);}
   

.grad7 {
color:#003; background:radial-gradient(closest-side ellipse , #09F, #003);}
   

Dit waren de eenvoudige gevallen. Je kan ook heel vaak de scheidingslijn zien van de kleuren. Wil je een hele mooie overgang maken, dan kies je voor hier onder

.extra01 {
background-image: radial-gradient(circle, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra02 {
background-image: linear-gradient(to right top, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra03 {
background-image: linear-gradient(to right, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra04 {
background-image: linear-gradient(to right bottom, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra05 {
background-image: linear-gradient(to bottom, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra06 {
background-image: linear-gradient(to left bottom, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra07 {
background-image: linear-gradient(to left, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra08 {
background-image: linear-gradient(to left top, #567BDF, #46609C, #304068, #142039, #010409);}
   

.extra09 {
background-image: linear-gradient(to top, #567BDF, #46609C, #304068, #142039, #010409);}
   

end
terug
home