Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор теней CSS
Настройте смещение, размытие, расширение, цвет и непрозрачность внешней или внутренней тени CSS.
Предпросмотр
Об инструменте
Придайте карточке глубину, отдельно подбирая размытие и расширение. Отрицательное расширение уменьшает контур тени.
Как пользоваться
Меняйте настройки и смотрите предпросмотр. Внутренняя тень включает inset. Смещение и расширение могут быть отрицательными, размытие — нет. Размеры от -200 до 200 px, размытие от 0 до 200 px. Создаётся один слой box-shadow, который можно скопировать или скачать.
Частые вопросы
Чем различаются размытие и расширение?
Размытие смягчает край, расширение увеличивает или уменьшает контур. inset создаёт внутреннюю тень. Инструмент выдаёт один слой; несколько теней можно объединить затем в CSS.
Как сместить тень влево или вверх?
Отрицательное горизонтальное смещение двигает влево, вертикальное — вверх. Положительные значения двигают вправо и вниз. box-shadow следует рамке элемента, не контуру непрозрачных частей картинки.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0