Как сделать такой эффект размытия вокруг блока с gif?

Ссылка скопирована
CSS HTML PHP
6 мая 2026 1 ответ

Всем привет!
Есть вот такой блок в макете

Как сделать такой эффект размытия вокруг блока с gif?

Это гифка в круге, но вокруг нее есть еще свечение, которое зависит от контента самого gif файла, т.е динамическое.

Пробовал разные варианты, но всегда либо видно квадратные границы, либо размытие просто ограничивается кругом.

Кто может подсказать, как это реализовать?

https://jsfiddle.net/md16bx90/

Дополнительно:

filter: blur для псевдо?

  • Вадим, да, но тогда как я и написал, мы увидим либо квадратные границы, либо размытие просто ограничится кругом
  • mbhusty, Ну Вы демку сделайте и посмотрим. А то на пальцах так себе обсуждать проблему.
  • если я правильно понимаю, то тут придется использовать 2 элемента наложением, один их которых будет с блюром
  • Вадим, upd https://jsfiddle.net/md16bx90/
  • mbhusty, js fiddle не работает в РФ без VPN. Если хотите чтобы на Ваши ответы реагировали быстрее, то демку сейчас лучше размещать на codepen.

    Но я пока ждал - набросал сам:
    snippet

    В такой реализации что-то Вам не подходит?

  • Вадим, snippet
    вот тут видно проблему о которой речь
  • mbhusty, Ну да, проблема именно с гифкой. В Вашу демку если поставить картинку то всё ок.
  • Вадим, поэтому и возник этот вопрос)
  • Ну смотрите, я полагаю, это из-за того, что гиф файл это некий контейнер, в котором лежит контент, и делая на нём блюр, браузер учитывает границы контейнера, а не только контента.
    На скорую руку пока придумал вот такой вот обходной путь: сделать размер контейнера больше, а размер фона - меньше. Таким образом, размытие контента не будет пересекать его контейнера:
    snippet
  • mbhusty, но вариант выше далеко не идеальный, т.к. контент в таком случае будет не круглый, а своей исходной формы. То есть тут тогда уже сама гифка должны быть с круглым контентом, чтобы было ок.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Максим Павлов Ответ

    Для создания эффекта размытия вокруг блока с gif можно использовать CSS фильтр `blur`. Этот фильтр позволяет добавить размытие к изображению или элементу.

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

    Пример кода на HTML и CSS:

    <div class="container">
  <img src="example.gif" alt="gif" class="blur">
</div>

    <div class="container"> <img src="example.gif" alt="gif" class="blur"> </div>

    .container {
  position: relative;
  display: inline-block;
}
 
.blur {
  filter: blur(10px); /* задаем значение размытия */
}

    .container { position: relative; display: inline-block; } .blur { filter: blur(10px); /* задаем значение размытия */ }

    В данном примере мы создаем контейнер с классом `container`, внутри которого находится изображение gif с классом `blur`. С помощью CSS свойства `filter: blur(10px);` мы добавляем размытие к изображению с уровнем 10 пикселей.

    Вы можете настроить значение `10px` в зависимости от желаемого уровня размытия. Также можно применить другие CSS фильтры, чтобы добиться более интересного эффекта.

    Надеюсь, что данное решение поможет вам создать эффект размытия вокруг блока с gif. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ