Multiple background colors with css only

Question

I want to have one element with multiple background colors? Analog of:

<div class="multiplebackground">
  <div style="background-color:red"></div>
  <div style="background-color:green"></div>
  <div style="background-color:blue"></div>
</div>

but if I have only 1 div with some text content:

<div class="multiplebackground">
  ...
</div>

.multiplebackground {
  ???
}

Or it is not possible?

Answer 1

You can achieve this with gradients. You just need to blend from a colour to the same colour, and then blend to the next colour across zero pixels and so on.

.Neapolitan {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
}

<div class="Neapolitan">

</div>

(Prefixed alternatives and IE specific code is available for older browsers)

Answer 2

You can do this with linear-gradient

body, html {
  margin: 0;
  padding: 0;
}

.multiplebackground {
  min-height: 100vh;
  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
  background-size: 100%;
  background-repeat: no-repeat;
}

<div class="multiplebackground"></div>