Multiple Color CSS Backgrounds

Jeremy Tong
May 5, 2021

--

Here’s a simple way to set a multiple color background purely using CSS, without the need to create a separate <div> for each color.

background: linear-gradient(to bottom, red 0% 14%, orange 14% 28%, yellow 28% 42%, green 42% 56%, blue 56% 70%, indigo 70% 84%, violet 84% 98%);

And a typescript function that’ll split equally for any number of colors at a given angle.

--

--

Jeremy Tong
Jeremy Tong

Written by Jeremy Tong

Startup-Focused Software Developer

No responses yet