Blue text on a yellow background |
Black text on an orange linear gradient |
White text on a rainbow linear gradient |
White text on a rainbow linear gradient |
Black text on a green radial gradient |
White text on a rainbow radial gradient |
Here is the CSS used for this example:
.blueonyellow { background:yellow; color:blue; } .orangegrad { background:linear-gradient(#fb0, #f50); } .rainbow1 { background:linear-gradient( red, orange, yellow, green, blue, indigo, violet); } .rainbow2 { background:linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); } .rainbow3 { background:radial-gradient( red, orange, yellow, green, blue, indigo, violet); } .greengrad { background:radial-gradient(#0a0, #0f0); } .rainbow1, .rainbow2, .rainbow3 { color:white; }
And here is the HTML: