Дизайн
Генератор теней CSS Box Shadow
Визуально настраивать тени блоков.
Как использовать
Начните с предустановки или одного слоя, затем добавляйте слои для глубины. Переключайте внутреннюю тень для эффектов нажатия / неоморфизма. Скопируйте значение через запятую в свойство box-shadow.
Вопросы и ответы
Можно ли наложить несколько теней?
Да — добавляйте слои, чтобы сочетать мягкую рассеянную тень с чёткой контактной или накладывать цветные свечения. У каждого слоя свои смещение, размытие, растяжение, цвет и переключатель inset.
Что делают пресеты?
Стартовые варианты в один клик: приподнятая карточка в стиле Stripe, выпуклый и вдавленный неоморфизм, материальная глубина и мягкое свечение — после применения настройте ползунки.
Как использовать результат?
Скопируйте строку box-shadow в свой CSS. Несколько слоёв разделяются запятыми именно так, как ожидают браузеры.
Последнее обновление: