Gradient Image Placeholders
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/
https://tools.w3clubs.com/gip/
npm i -g cssgip
gip test.png
# background: #3f8cc4; background: linear-gradient(to bottom, #0f7ad2 0%, #b0adbe 100%)
const gip = require('cssgip');
const result = await gip('./image.jpg');
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%)"