Why background gradients?

Gradients can be used to define multiple backgrounds while simple colors can’t. Using gradients as backgrounds gives you limited shapes — basically rectangles with linear-gradient and circles with radial-gradient — together they can be combined to a powerful outcome.

This method also is pretty lightweight and can be compressed easily because of repeating patterns. (How gzip algorithm works)

GPU accelerated animations are possible as well when using background gradients.

Although all the pros — there is at least one downside. Manually creating and orchestrating multiple backgrounds can be painful. If we look at a simple example like:

Skeleton for a simple “Profile” element

Managing all these magic numbers could be quite hard

Automize and simplify with Sass

Luckily there is a helper available to draw and manage multiple backgrounds using Sass.

empty-state is a collection of Sass mixins and functions to simplify the process drawing empty state skeleton backgrounds. These states are often used to provide an indication how the content that is loading is looking and it will be replaced when content is loaded.

To install this empty-state skeleton builder you you can run:

npm install empty-state --save

Then import the mixins in your Sass file like:

@import '~empty-state/skeleton';

The base concept of empty-state can be seen as: