blurhash-to-css-gradient
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

blurhash-to-css-gradient

A zero-dependency function that converts a Blurhash value to a CSS gradient string, which can be used as an image placeholder background. While other blurhash libraries are available, this one is designed only for the decoding part. If you are building frontend applications, this library is for you.

Usage

import { blurhashToCssGradient } from 'blurhash-to-css-gradient';

const blurhash = 'UCHeUgK5ox~q~qX70Kod4=jFRPMx9bxuaLIU'; // this might be generated from your CMS like caisy.io
const backgroundColor = blurhashToCssGradient(blurhash);
console.log(backgroundColor);

↓output↓

radial-gradient(at 0 0,#84898c,#00000000 50%),radial-gradient(at 33% 0,#888d91,#00000000 50%),radial-gradient(at 67% 0,#a3a0a4,#00000000 50%),radial-gradient(at 100% 0,#9a9194,#00000000 50%),radial-gradient(at 0 50%,#b7b8a9,#00000000 50%),radial-gradient(at 33% 50%,#9a9281,#00000000 50%),radial-gradient(at 67% 50%,#b5a69a,#00000000 50%),radial-gradient(at 100% 50%,#c2b5a7,#00000000 50%),radial-gradient(at 0 100%,#a1a09a,#00000000 50%),radial-gradient(at 33% 100%,#7f7b71,#00000000 50%),radial-gradient(at 67% 100%,#7f796f,#00000000 50%),radial-gradient(at 100% 100%,#968c82,#00000000 50%)

Credits

The library is a reassibling of only the important parts form blurhash and unpic-placeholder in one single file that are needed for decoding a blurhash value to a CSS gradient string.

Readme

Keywords

none

Package Sidebar

Install

npm i blurhash-to-css-gradient

Weekly Downloads

11

Version

1.1.0

License

MIT

Unpacked Size

82.6 kB

Total Files

15

Last publish

Collaborators

  • m.gruber