Pure CSS Shaders Art

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

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.

• Happy Valentines
• Lord of Rings
• Real Squircle + Drop Shadow from iOS since CSS can't do squircles

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?

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:

• Book of Shaders
• Shadertoy
• Inigo Quilez' website