Gradient Maps, now on iOS7!

Gradient maps, they’re not just for desktop anymore…

gradientmaps.js is a library I wrote that leverages SVG Filters to enable you to easily apply a Gradient Map to any DOM element.

Screen Shot 2013-10-05 at 10.30.58 AM

Screen Shot 2013-10-04 at 4.30.12 PM

When I first announced the library, it seemed obvious to me how you could use the library for creative effects, but then I got thinking of some practical use cases for the library. Then I went through some Photoshop-type layering techniques in another post.

Up until now though, gradientmaps.js was only supported on Chrome & Firefox.  With the release of iOS7 however, the library is now supported on mobile Safari, so you can view gradient maps on your iDevices!

Here’s a snapshot from my iPad of this Codepen:


If you’re running Firefox, Chrome, WebKit nightly, Opera or iOS7 mobile Safari, you can try out the pen right here:

Check out this Pen!

This particular example has two overlapping DIVs with the same content.  The top DIV has a gradient map applied to it.  The bottom DIV is left as is.  You can then control the transparency of the top layer to define how much or how little of the gradient map you want to show.

You can find out more about the library in this post on the Adobe Web Platform team blog.

gradientmaps.js is now supported on so many browsers, there’s no reason not to check it out. The Web like you’ve never seen it before.

Tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *