Как сделать размытые границы у блока?

Question

[xolova]

Здравствуйте.

Каким образом можно достичь подобного эффекта?
Блок фиксированной ширины, внутри неограниченное число кнопок, которые можно листать.

Comments

[Rustam Bainazarov]

Какой фон? Это делают обычно псевдоэлементами с градиентом.

Так же можно с помощью маски.

[Lord_Dantes]

Есть еще фильтры CSS мб там что-то есть.
filter: contrast(1);

Answer 1

[Арсений Матыцин]

Это не размытие, а уход в прозрачность.

Поможет:
1. linear-gradient — если тебя устроит увод в прозрачность только фона картинки.
2. svg mask — если надо сделать в тютельку, как на пикче, уводя в прозрачность еще и текст.

Answer 2

[Дмитрий Комчев]

Добавь псевдоэлемент, спозиционируй его в правый нижний угол, затем добавь тень для него.