Несколько способов создания эффекта разорванной бумаги в веб-дизайне:

1. В Figma. 1 Нужно подрезать края изображения рваной бумаги под размер фото картины, добавить его на место, где будет виден эффект. 1 Затем фото-копию картины в слоях слева перенести над фото рваной бумаги, выделить фото картины и рваную бумагу и создать маску. 1 После этого доработать детали фото: выделить фото в групп-маске и увеличить его, зажав Shift. 1 В конце доработать рваные края: в копию рваных краёв добавить отступ и подрезать под размеры фото. 1
2. С помощью CSS. 2 Нужно найти два подходящих изображения размером не менее 1920x1080 пикселей и скачать их. 2 Оба изображения будут фоновыми, которые вставляются через CSS-стили, а не напрямую в HTML-разметку. 2 Рваная бумага при этом лежит на верхнем слое, а фотография — на нижнем. 2 Затем использовать режим смешивания mix-blend-mode со значением lighten, чтобы поднять на верхний слой центральную часть нижнего изображения. 2

Также в Figma можно использовать готовые шаблоны дизайна разорванной бумаги (Ripped/Torn Paper). 4