Background Gradients 4 Ways

There's more than one way to skin a div in CSS. Let's create a background gradient using 4 different methods.

You can learn how to use CSS color codes at W3Schools and consult the MDN docs for a complete reference.

This div has a background that was created using hexidecimal color codes with an added alpha channel:

background-image: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);

This background was created using rgba values:

background-image: linear-gradient(45deg, rgba(133, 213, 231, 0.34), rgba(122, 158, 210, 0.33), rgba(187, 106, 201, 0.24), rgba(222, 84, 194, 0.09), rgba(248, 106, 45, 0.31))

This background was created using hsla values:

background-image: linear-gradient(45deg, hsla(191.02, 67%, 71%, 0.34), hsla(215.455, 49%, 65%, 0.33), hsla(291.158, 47%, 60%, 0.24), hsla(312.174, 68%, 60%, 0.09), hsla(18.03, 94%, 57%, 0.31))

This background was created using pre-defined color variables:

<style>
:root {
--green: rgba(133, 213, 231, 0.34);
--blue: rgba(122, 158, 210, 0.33);
--pink: rgba(187, 106, 201, 0.24);
--red: rgba(222, 84, 194, 0.09);
--orange: rgba(248, 106, 45, 0.31);
}
</style>

background-image: linear-gradient(45deg, var(--green), var(--blue), var(--pink), var(--red), var(--orange));<