Design in the browser with CSS image effects

Who needs Photoshop? Una Kravets demonstrates how to create image effects using CSS.

It used to be that the most exotic thing you could do with images in the browser was just to change the image resolution, but as computers and web browsers become more powerful it's now possible to create impressive image effects that you'd expect to have to use Photoshop CC for.

All it takes is a bit of CSS knowledge, and in this session from Generate New York back in April, Una Kravets – creator of the ever-popular CSSGram - shows you how to do it. She points out that it's now possible to design in the browser, and over half an hour she demonstrates how to apply filters, blend modes and gradients to images, and shows you how to combine them to bring pictures to life without going anywhere near Photoshop.

Generate New York - Una Kravets

Learn how to apply filters, blends and gradients in the browser with Una Kravets

It's increasingly easy to pull off amazing visual tricks in the browser using the standard web toolkit rather than relying on plugins, and if you want to give your pages extra flair then there are plenty of opportunities to learn the latest visual techniques at upcoming Generate conferences.

This Friday at Generate San Francisco Sarah Drasner will be explaining how you can create intricate SVG animations. As well as demonstrating multiple techniques for manipulating vectors, she'll also show you how to use SVGs as a viewfinder, push the boundaries of the CPU with filters, and even combine techniques to create otherworldly effects. Don't miss out; there's still time to book your ticket!

At Generate Sydney on 5 September, Val Head will discuss motion in design systems. In her talk she'll cover guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use; all the things you need to make web animation work for you and your team.

Generate London - Cennydd Bowles

Don't miss Cennydd Bowles' all singing, all dancing Generate London session

And at Generate London on 22 September, Cennydd Bowles will talk about adding an extra dimension to your web experiences: sound. In All singing, all dancing he'll look at the potential of sound in our products, show you how simple music theory can help communicate mood and function, and finally explore how motion and sound together can help bring life and clarity to the things we make.

If you're serious about web design or frontend development then you can't afford to miss Generate; it's a perfect opportunity to learn from the experts and give yourself an extra competitive edge that'll win you more clients and keep them coming back. To find out more, head to the main Generate site.


Jim McCauley is a writer, editor and occasional podcaster, and is available for space parties.