This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

The skeleton page is a big trend in UX field. Using CSS Grid to create the page layout, it is more practical to work with components that need to be dynamically repeat. Example of a skeleton screen for a card loader using CSS Grid and Custom Properties. Example developed using css and html. Demo and download option available.