Using CSS gradients for background gradient images

You can do A LOT with CSS gradients! Even replace background gradient images with CSS. In fact, that’s how I came down this exploration on background gradients with CSS.

I was building a page and given this background image below, which was initially 25MB. An image this size would take forever to load. In order, to not have a jarring loading experience, you would initially have a background color on page load and then swap it out with the image once it loaded. Or…you can completely replace the image with CSS gradients. Not to mention, this would be more performant with load times.

Original image file

There are 3 different CSS gradients: linear, conic, and radial. Each gradient uses a CSS function to pass in multiple color arguments. The colors can be in the format of hex, hsla, rgba or named colors. In addition, you can pass in direction and angles to specify the shape and transition of the gradient.

Linear Gradient

A linear-gradient consists of two or more colors that fade evenly into each other in a straight line. At a minimum you need to pass in two colors (color stops). The first color argument will be the color on the top and then the gradient will transition downwards and hit the next color stop.

element {
  background: linear-gradient(#80FFDB, #5390D9);
}