DevTulz Online

CSS Box Shadow Генератор

Фон

Какво е CSS Box Shadow?

CSS свойството box-shadow добавя ефекти на сянка около рамката на елемент. Сянките могат да бъдат отместени, размазани, разпространени, оцветени и зададени като inset (вътрешна сянка). Множество сенки, разделени със запетаи, могат да се наслагват за богати ефекти. Този генератор ви позволява да изграждате сложни многослойни сенки визуално и да копирате готовия CSS в клипборда.

Как да използвате Box Shadow Генератора

  1. Регулирайте плъзгачите за Offset X/Y, Blur и Spread, за да позиционирате и оформите сянката.

  2. Кликнете върху цветния образец, за да изберете цвят на сянката, и използвайте плъзгача Opacity за прозрачност.

  3. Превключете 'Inset', за да създадете вътрешно сияние или ефект на натискане.

  4. Кликнете '+ Добави слой', за да наслоите множество сенки една върху друга.

  5. Копирайте генерирания CSS и го поставете в стиловия си лист.

Често задавани въпроси

Каква е разликата между box-shadow и drop-shadow filter? box-shadow добавя сенки около правоъгълната граница на елемента и поддържа вътрешни сенки. CSS filter: drop-shadow() се прилага към визуалната форма на елемента (включително прозрачност), което я прави да следва неправоъгълни контури като PNG файлове с прозрачни фонове.

Как създавам ефект на издигане на картата Material Design? Наслагвайте две сенки на кутия: мека амбиентна сенка (голямо размазване, ниска непрозрачност, лекко разпространение) и ключова сенка (по-малко размазване, по-висока непрозрачност, насочено отместване). Например: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Влияе ли box-shadow на оформлението на страницата? Не. box-shadow не влияе на размера или позицията на елемента в документния поток. За разлика от outline, той не заема място в оформлението и няма да премества други елементи около себе си.

Мога ли да анимирам box-shadow? Да. box-shadow е анимируем с CSS transitions и animations. За производителност, предпочетайте да анимирате box-shadow само когато е необходимо — браузърите не могат да ускорят GPU промени на box-shadow толкова ефективно, колкото transform или opacity.

Keywords: CSS box shadow генератор, box-shadow CSS, CSS инструмент за сянка, CSS drop shadow, вътрешна сянка, многослойна сянка, CSS shadow онлайн