TGViewer
Frontend Interview - собеседования по Javascript / Html / Css Frontend Interview - собеседования по Javascript / Html / Css @frontendinterview · 10.4K subscribers
Post #5090 641
🌈 Свечение внутри элемента, но из любого фона

Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?

Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.

Маска для левого и правого краёв (black в маске значит «видно»):
--inset: 30px;
mask-image: linear-gradient(
to right,
black 0%,
transparent var(--inset),
transparent calc(100% - var(--inset)),
black 100%
);

Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.

Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.

В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.

👉 @seniorFront
  • ❤ 2
More from @frontendinterview
  1. Oct 9, 20265 офферов получили наши ребята на прошлой неделе Оффер на 4,2k долларов Оффер на 5k евро О…
  2. Oct 9, 2026🧮 Поле ввода, в которое можно вписать формулу Часто число для формы сначала надо посчитат…
  3. Oct 7, 2026🎨 Текст, который сам подбирает цвет под фон Если фон карточки задаётся фирменным цветом и…
  4. Oct 5, 2026🔍 Убрал повтор в скринридере и сломал кнопку Джейк Арчибальд делал кнопку-иконку «жирный»…
  5. Oct 1, 2026Ищем новичков, готовых взять свой первый заказ на разработку сайта. Опыт не нужен. Заказ:…
  6. Sep 30, 2026🚀 Два атрибута у картинки, и страница перестаёт прыгать Пока картинка грузится, тег img з…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →