I have a card component with a photo. I don't want any portion of photos to be cut off, but this means narrow/vertical photos will have empty space to the sides.

I want to use that blur tiling often seen:

enter image description here

Does this have a name? What is it?

2 Answers 2


I am wondering if there actually is a specific name for it, because it is actually a combination of states and conditions that result in this particular view of the image. A normal image would take up the entire space and not be blurred, while a narrow image or vertical photo triggers resizing and tiling of images, with images to the side having a blurred background effect applied to it.

If this effect is really as popular as suggested, I hope that there might be a name applied to this 'optimized view' of an image on a card component.

Complex design and interaction patterns don't always have short names attached to it, because it can easily be misleading or cause confusion because there are different reasons or sequences leading to the end view.


I don't know any name, but I was under the impression that the problem is solved differently:

It's not the entire image which is repeated (tiled) and blurred, but only a narrow border of it (a strip on the left border of the image appears stretched on the left side, with blur, and a strip on the right border of the image appears on the right side).

And of course, I don't have an example at hand - maybe I remember to add one here when I stumble across the next one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.