As my Pluralsight PWA Sensor Course leaps into record mode, I’ve been looking for ways to add visual interest to my camera shots - but without the overhead of mega-battery-drain client-side image processing.

Sounds like a great reason to dive into CSS filters as a lightweight way to transform captured images on mobile. After a little googling, I ran into CSSgram - a CSS filters library for Instagram style filters! How cool.

Import a CSS file, and you’re ready to filter:

CSSgram Filters in Action

Implementing a given filter is super quick. Pick one of the many style names, and add it the parent element of your image, and you’re off to the races. They recommend doing that via the figure tag, which I’ve done in the page above with:

<figure class="hudson">
    <img src="[[imageData]]" on-click="selectFilter">
</figure>

<figure class="inkwell">
    <img src="[[imageData]]" on-click="selectFilter">
</figure>

<figure class="kelvin">
    <img src="[[imageData]]" on-click="selectFilter">
</figure>

Definitely a cool way to add some pop to your PWA image capture stuff!

Have fun!