GIP
Gradient Image Placeholders
Purpose
Generate background CSS for an image to show something while the image is yet to load.
Writeup: https://calendar.perfplanet.com/2018/gradient-image-placeholders/
Try it out
https://tools.w3clubs.com/gip/
CLI
npm i -g cssgip
gip test.png
# background: #3f8cc4; background: linear-gradient(to bottom, #0f7ad2 0%, #b0adbe 100%)
Usage
const gip = ;const result = await ;
The result
is an object with three properties like:
css: "background: #ab9f92; background: linear-gradient(135deg, #cbc6c2 0%, #5d5347 100%)"background: "#ab9f92"gradient: "linear-gradient(135deg, #cbc6c2 0%, #5d5347 100%)"