[Web design] CSS shaders?! What can't CSS do?

Eric

Eric

local maker
Staff member
I have been out of the web development loop for a long time but when I first learned CSS it was all about moving the web off HTML tables and moving into the resolution-flexible web we somewhat have today. CSS has been getting new features that browsers are supporting more now and there have been some seriously cool features gaining support with it that makes me wish I could spend all day playing with them!

Robb Owen has an article on CSS shaders that can now do masking effects like multiply, color-burn and color-dodge with images and has manipulated the feature to simulate holo-foil stickers, the Aurora Borealis and Light Leak effects, scroll to the bottom of the page if it's TLDR, to see the cool examples :

robbowen.digital

Holograms, light-leaks and how to build CSS-only shaders - Robb Owen

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript
robbowen.digital robbowen.digital
 
Well now this is just silly.

This is so cool. A lot of it is already in place around the internets , but to see it put together in these ways is great.

You should grab me some time to give you a demo of Divi's separator effects and background voodoo. It's not this impressive, but it's pretty sweet.
 
Back
Top