CSS Gradients with background-blend-mode

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

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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

GIPHY App Key not set. Please check settings

    Sky Daisies

    Dragon Lair