Генератор Box Shadow

Используйте ползунки для настройки box-shadow, накладывайте слои для создания глубины и мгновенно копируйте готовый CSS.

Слои теней
Слой 1
CSS
Настройте ползунки, чтобы придать тени нужную форму.

Каждая тень отрисовывается в вашем браузере. Никакие заданные вами параметры не отправляются на BroBroGo.

Частые вопросы

За что именно отвечают смещение, размытие и растяжение?

Смещение (offset) сдвигает тень влево/вправо и вверх/вниз, размытие (blur) смягчает ее края, а растяжение (spread) увеличивает или уменьшает ее размер перед размытием. Отрицательное растяжение стягивает тень внутрь, что полезно для создания аккуратных, близких к объекту теней.

Что делает опция внутренней тени (inset)?

Обычная тень падает снаружи элемента, создавая эффект парения (как свет за приподнятой карточкой). Опция Inset переносит тень внутрь, из-за чего элемент кажется вдавленным — это отлично подходит для полей ввода или нажатых кнопок.

Зачем накладывать несколько слоев теней?

Одиночная тень при больших размерах выглядит плоско. Реалистичный эффект глубины обычно сочетает плотную темную тень с мягкой и более широкой. Добавьте второй слой и настройте каждый независимо для достижения этого эффекта.

Генератор CSS Cubic BezierПеретаскивайте маркеры для настройки кривой плавности, сравнивайте движение с линейным шаблоном и копируйте значение cubic-bezier().Генератор градиентовСоздавайте линейные, радиальные или конические градиенты, добавляйте опорные точки, настраивайте направление и копируйте готовый CSS в один клик.Генератор Border RadiusСкругляйте каждый угол ползунками, создавайте органичные формы в эллиптическом режиме и мгновенно копируйте CSS.Генератор FlexboxНастраивайте flex-контейнер и его элементы с помощью визуальных элементов управления, наблюдайте за изменениями в реальном времени и копируйте CSS в один клик.Генератор CSS GridЗадайте количество колонок и строк, выделите ячейки для размещения элементов и скопируйте готовый CSS-код вместе с HTML в один клик.Калькулятор CSS clamp()Задайте размеры для малых и больших экранов и получите адаптивное значение clamp() для плавного масштабирования шрифтов, отступов и полей.Конвертер цветовКонвертируйте цвета между HEX, RGB, HSL, HSV, CMYK и LAB — меняйте любое поле, а остальные обновятся на лету.Форматирование и минификация CSSФорматируйте запутанный CSS для удобства чтения или минифицируйте его для продакшена — с безопасным режимом, который никогда не меняет порядок правил.Проверка контрастностиВведите цвета текста и фона, чтобы узнать коэффициент контрастности по стандарту WCAG и проверить соответствие уровням AA и AAA.