CODEWITHSUNDEEP
csscss-gradients
Shift and Shiftine
Shift and Shiftine

Reputation: 181

Is it possible to convert Blurhash string to CSS gradients?

I'm currently interested in Blurhash, which can be used as user-friendly placeholder for image loading, to convert the given hash into a set of CSS gradient background, so I may use it as a placeholder like:

{
  background: radial-gradient(...) linear-gradient(...); /* converted Blurhash representation */
  background: url('/path/to/image.jpg');
}

or:

<img src="/path/to/image.png" style="background: radial-gradient(...) linear-gradient(...);">

I know that it is currently possible to use these hashes on web, and there's also an official TypeScript implementation, but the library only returns the decoded hash in terms of pixels (or HTML <canvas> data).

Are there any library that can convert these data into CSS gradient instructions?

Upvotes: 0

Views: 389

Answers (1)

swissspidy
swissspidy

Reputation: 169

I have been looking into this myself recently. Here are some of the solutions I found:

  • @unpic/placeholder - a JS library which offers a blurhashToCssGradients function which turns a BlurHash into a series of radial-gradient() declarations.
  • https://github.com/aredridel/blurhash-to-css - a PHP library which offers way to turn a BlurHash into a combination linear-gradient declarations, transform, and blur
  • blurhash-gradients - another JS library, uses gradients, clip-path, filter, and box-shadow. Very new, but looking at the source code it seems to have at least some documentation.

Upvotes: 2

Related Questions