Pixr - CSS image editor

Iā€™m definitely late to the party! though it is better than not to show up at all šŸ˜Ž

There are a ton of articles on internet about the moderately latest CSS properties such as filter, background-blend-mode and mix-blend-mode. Neglecting the fact that it is not possible to use these features in production apps in near future (due to lack of old browsers support), I just wanted to look how it works.

tl;dr

Pixr - CSS Image Editor

filter

Applies different filters on top of image. Browser support

Filter function value type value range
blur() length length in px
hue-rotate() angle 0deg - 360deg
opacity() number/percentage 0% - 100% or +ve number
grayscale() number/percentage 0% - 100% or +ve number
sepia() number/percentage 0% - 100% or +ve number
invert() number/percentage 0% - 100% or +ve number
saturate() number/percentage 0% - (any number)% or +ve number
brightness() number/percentage 0% - (any number)% or +ve number
contrast() number/percentage 0% - (any number)% or +ve number


Eg:

.image {
    -webkit-filter: blur(2px) saturate(110%);
    filter: blur(2px saturate(110%));
}

background-blend-mode

Background image is blended with background color of the same element. Browser support


Eg:

.bg-image {
    background-image: url('img.jpg');
    background-color: deeppink;
    background-blend-mode: multiply;
}

mix-blend-mode

A div is blended on top of another div with background image. Browser support


Eg:

.bg-image {
    background-image: url('img.jpg');
    background-color: deeppink;
}
.overlay-div {
    width: 400px;
    height: 300px;
    background-color: yellow;
    mix-blend-mode: lighten;
}
background-blend-mode & mix-blend-mode values
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
luminosity

Here is a demo for all these three properties.

Pixr - CSS Image Editor

blog comments powered by Disqus