Search code examples
cssimagemagickfilteringminimagick

ImageMagick command equivalent for a CSS brighten + blur filter

I am having a lot of trouble trying to understand the CSS rules of filter brightness / blur to replicate the same effect on the original image directly via ImageMagic.

The overall look'n'feel I'm trying to achieve : each avatar is on a background image that is actually the same avatar, but blurred and darkened. I'm trying to craft that background using the original image.

The CSS for the background

.professional-card .header .avatar-background {
    width: 110%;
    height: 110%;
    background-size: cover;
    -webkit-filter: blur(10px) brightness(50%);
    filter: blur(10px) brightness(50%);

To begin with, I'm not sure how to convert this blur(10px) into ImageMagick's blur with radiusxsigma I tried using something like blur: [0, 12] but doesn't seem to quite make it

Next I can't figure out what the brightness(50%) actually converts to. I've tried various stuff, gamma, modulate and the latest that byt the sound of it should be what shoud work best img.brightness_contrast(-50).

But the final image I get (combined with the blur) doesn't get the same feeling : https://i.sstatic.net/gcbwW.jpg

Another thing I noticed : the order of the filters doesn't seem to matter on the browsers blur(10px) brightness(50%) == brightness(50%) blur(10px) but it does on imagemagick (https://i.sstatic.net/4cpab.jpg when blurring is done before darkening). Mathematically speaking it does make sense that blurring/darkening are not commutative that's why Im' starting to think the browsers' way of filtering is maybe not a simple operation...?

sidenote: I'm having some troubles making the background image IE11 and Outlook compatible, so I need to generate the same image backend-side so I can just use a simple background image without any CSS/filter needed client-side

Solution

  • I am using Imagemagick 6.9.9.30 Q16 Mac OSX Sierra. You do not say what version of Imagemagick you are using!

    Original:

    enter image description here

    Looking at the CSS filter documentation for blur and brightness at https://drafts.fxtf.org/filter-effects/#ShorthandEquivalents, I see that their brightness (slope of straight line transfer function) is similar to Imagemagick +level for darkening by 50% and their blur is a gaussian blur with the value corresponding to the standard deviation (or sigma), so similar to Imagemagick's -blur (faster) or -gaussian-blur (slower).

    So in principal, this should be the same as your CSS code

    convert cyril.jpg -blur 0x10 +level 0x50% cyril_blur_level.png

    enter image description here

    The order is not important. So this is the same.

    convert cyril.jpg +level 0x50% -blur 0x10 cyril_blur_level2.png

    enter image description here