How is this iTunes album art blur effect achieved?

Question

Images for reference:

From clicking around on other albums, it appears that the album art is possibly zoomed in on and then a blurred mask is applied over top? Does anyone know how this kind of effect is achieved? It's a really good looking blur and transparency combination.

Blue Boy · Answer 1 · 2016-08-02T01:04:34.607

1

Here is a jsfiddle with an example:

(The top is the blur effect and the bottom is the original image)

https://jsfiddle.net/LmyepLac/

The useful part is:

  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);

To create a blur effect, can change from 20px to suit your needs :)

edited Aug 02 '16 at 01:04

answered Aug 02 '16 at 00:56

Blue Boy

620
1
6
13

Soon, the headers will be removed and you will only need to use `filter`. – bb216b3acfd8f72cbc8f899d4d6963 Aug 02 '16 at 01:00
Updated example: https://jsfiddle.net/LmyepLac/1/ – Blue Boy Aug 02 '16 at 01:02
@peanut yes that's true, thanks :) – Blue Boy Aug 02 '16 at 01:02
[Here's a much simpler way of doing the blur.](https://jsfiddle.net/Purpur/LmyepLac/2/) – bb216b3acfd8f72cbc8f899d4d6963 Aug 02 '16 at 01:04

How is this iTunes album art blur effect achieved?

1 Answers1