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: