Генератор теней для блоков

Этот инструмент позволяет создавать CSS box-shadow эффекты, чтобы добавить тени к вашим CSS объектам.

Генератор теней позволяет добавлять одну или несколько теней к элементу.

При открытии инструмента вы увидите прямоугольник в правом верхнем углу инструмента. Это элемент, к которому вы будете применять тени. Когда этот элемент выбран (как и при первой загрузке страницы), вы можете применить к нему некоторые базовые стили:

• Установите цвет элемента с помощью инструмента выбора цвета.
• Добавьте границу элементу, используя флажок "border".
• Используйте ползунки для установки свойств top, left, width и height элемента.

Чтобы добавить тень, нажмите кнопку "+" в левом верхнем углу. Это добавит тень и отобразит ее в левом столбце. Теперь вы можете установить значения новой тени:

• Установите цвет тени с помощью инструмента выбора цвета.
• Установите тень как вдавленную, используя флажок "inset".
• Используйте ползунки для установки позиции, размытия и размаха тени.

Чтобы добавить ещё одну тень, нажмите "+" ещё раз. Теперь любые значения, которые вы установите, будут применяться к этой новой тени. Измените порядок применения этих двух теней, используя кнопки ↑ и ↓ в левом верхнем углу. Выберите первую тень, щелкнув её в левом столбце. Чтобы обновить стили самого элемента, выберите его, нажав кнопку "element" вверху.

Вы можете добавить псевдоэлементы ::before и ::after к элементу и применить к ним тени. Чтобы переключаться между элементом и его псевдоэлементами, используйте кнопки вверху, помеченные "element", ":before" и ":after".

В правом нижнем углу находится CSS для элемента и любых before:: или ::after псевдоэлементов.