Pure CSS Shaders Art

Shaders art made with pure CSS, with an editable code area also made in CSS, for better eh, developer experience.

Heart

The spans are arranged into a 2d grid and colored using shader-style coding methods (short, concise code shared across all spans, with different CSS variable inputs). This ensures that the CSS art is easy to understand, maintain and modify.

The demos are responsive & editable even on mobile. Check out this repo’s various html sources.

FAQ

  • But no one will read and modify these obviously nonsensical pieces of code: I bet they will! I bet you are =P
  • Ok but why: I wanted to share shader art in macOS and iOS’s Quick Look. Quick Look HTML previews disable JS for security and performance, so CSS was the only option left.
  • Is this a joke: CSS or shaders?

Quick Look

Contribute

Make your own CSS shader art and spread the joy! Ping me on Twitter; I’d like to see what you’ve made =)

Further Reading

Wanna get started on shaders? Try:

GitHub

View Github