Inspiration & Resources From All Around The Web

Switch to the dark mode that's kinder on your eyes at night time.

Switch to the light mode that's kinder on your eyes at day time.

Inspiration & Resources From All Around The Web

in Coding

CSS Gradients with background-blend-mode

by Fribly Editorial September 23, 2014, 7:00 am 59 Views

The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer.

CSS gradients are already immensely powerful in creating patterns, as shown in Lea Verou’s CSS Patterns Gallery. With the new background-blend-mode property, the possibilities expand once more.

CSS gradients are completely resolution-independent and faster to modify than images. With performance considerations in mind, animations and transitions are possible through the background-size or background-position properties.

View Demo & Download

0 shares

Code CSS CSS3 Free Gradient Resource Snippets Web Design Web Development

Written by Fribly Editorial

Fribly is a digital magazine where we will share useful and awesome stuff for your inspiration and benefit.
We will hope to bring you daily resources and inspiration from all around the web. You just sit back and enjoy, and we will do all the search work for you. We will strive to find the best and most useful stuff out there.