blurhash-to-css-gradient
v1.1.0
Published
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 fr
Downloads
149
Readme
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.