Генератор теней CSS: живой предпросмотр, копия кода
Настройте смещение, размытие, растяжение, цвет и непрозрачность для CSS box-shadow, посмотрите предпросмотр и скопируйте код.
Генератор теней CSS
Этот генератор создаёт одно значение CSS box-shadow на основе шести параметров: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения, цвет тени с собственным ползунком непрозрачности и переключатель inset. Два дополнительных выбора цвета задают поле предпросмотра и его фон, чтобы тень было хорошо видно и на светлом, и на тёмном фоне, а четыре готовых набора, soft, hard, glow и inset, загружают готовую комбинацию одним кликом. Каждое изменение сразу обновляет строку box-shadow под предпросмотром, готовую для копирования.
Как формируется значение box-shadow
CSS записывает тень в фиксированном порядке чисел: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения, затем цвет; чтобы нарисовать тень внутри края блока, а не позади него, впереди добавляется слово inset. Горизонтальное и вертикальное смещение двигает тень в сторону или по вертикали, и оба параметра принимают отрицательные значения до -50px, так что тень может оказаться слева от блока или над ним. Радиус размытия, от 0 до 100px, смягчает край тени, а радиус растяжения, от -50 до 50px, увеличивает или уменьшает тень независимо от размера самого блока. Шестнадцатеричное значение из выбора цвета раскладывается на составляющие красного, зелёного и синего, а ползунок непрозрачности, от 0 до 1, становится четвёртым значением внутри rgba(); при 0 тень полностью прозрачна, при 1 она точно совпадает с выбранным цветом.
Разобранный пример
При горизонтальном смещении 5px, вертикальном 5px, размытии 14px и растяжении 1px, вместе с цветом тени #b45309 и непрозрачностью 0,35, получается box-shadow: 5px 5px 14px 1px rgba(180, 83, 9, 0.35). Шестнадцатеричный код #b45309 раскладывается на красный 180, зелёный 83 и синий 9, а 0,35 с ползунка непрозрачности становится четвёртым значением rgba() без дополнительных преобразований. Включение inset при тех же шести значениях рисует ту же тень внутри края блока, а не позади него, что часто используется для нажатых кнопок или вдавленных полей ввода.
Готовый к копированию CSS-код
.card {
box-shadow: 5px 5px 14px 1px rgba(180, 83, 9, 0.35);
}