Gradient Image Placeholders
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
.gitattributes
.gitignore
README.md
index.js
package.json

README.md

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 = 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%)"