CSS-генератор тени, градиента и скругления

Подберите горизонтальное и вертикальное смещение, размытие, растяжение и цвет. Предпросмотр меняется сразу при вводе корректного числа. Полученный box-shadow можно вставить в свой селектор вместо демонстрационного .card. Отрицательные смещения сдвигают тень в обратную сторону, нулевое размытие делает край более резким.

Числовые поля допускают промежуточный ввод: можно стереть старое значение и набрать новое без прыжка к границе диапазона. При выходе из поля неподходящее число приводится к допустимому диапазону. Цвет выбирается стандартным элементом браузера. Результат остаётся обычным CSS, без зависимости от генератора.

Выберите два цвета и угол для linear-gradient. Угол меняет направление перехода; сама функция записывается в свойство background. Скругление border-radius задаётся в пикселях. В предпросмотре все три эффекта показаны вместе, чтобы видеть, не теряется ли тень на фоне и подходит ли скругление форме карточки.

После копирования можно удалить ненужные строки. Например, если вам нужен только градиент, оставьте background и уберите box-shadow и border-radius. Если дизайн-система использует переменные, замените конкретные цвета на var(--color-name) в своём проекте. Генератор выдаёт явные значения, чтобы код был переносимым.

Настройки по умолчанию дают блок с мягкой тенью, переходом между двумя цветами и умеренным радиусом. Кнопка «Вставить пример» восстанавливает этот набор. Получившийся CSS можно скачать как card.css, открыть в редакторе и перенести в существующий файл стилей.

Если тень не видна на странице, проверьте цвет фона, смещение и overflow у родительского элемента: обрезание содержимого может скрыть её снаружи. Если градиент перекрывает фотографию, используйте несколько слоёв background в своём CSS. Этот генератор создаёт один простой linear-gradient и не знает особенностей вашего макета.

Все настройки и предпросмотр работают локально в браузере. В аналитику уходит только действие копирования или скачивания, без цветов и значений. Готовый CSS можно проверить и сжать в CSS-форматировщике, но сначала убедитесь, что изменения не нарушают макет на разных ширинах.

Для полноценной карточки сайта проверьте контраст текста относительно выбранного фона, размеры на мобильном экране и состояния наведения. Генератор не вычисляет доступность автоматически. Если нужны единые компоненты для большого сайта или интернет-магазина, полезнее собрать дизайн-систему и использовать общие переменные во всех шаблонах.

Скопированный блок использует демонстрационный класс .card. В своём проекте замените селектор на реальный класс компонента или перенесите три свойства в уже существующее правило. Если стили собраны через CSS Modules, используйте локальное имя класса. Если проект применяет Tailwind или другую систему утилит, можно сохранить CSS как отдельный класс или перевести значения в принятую систему токенов.

Проверьте порядок каскада. Более позднее правило background или box-shadow может перекрыть результат генератора, хотя код синтаксически верен. В браузерных инструментах разработчика найдите элемент и посмотрите вычисленные стили. Для градиента также убедитесь, что цвет текста сохраняет читаемость на обеих сторонах перехода.

Тень и градиент помогают выделить блок, но на странице с десятками карточек сильные эффекты создают визуальный шум. Сравните предпросмотр на светлом и тёмном фоне своего сайта. Скругление должно согласовываться с кнопками, полями и остальными компонентами. Если у карточки есть изображение, проверьте, не выходит ли оно за закруглённый угол.

Для анимации наведения не копируйте несколько почти одинаковых правил на каждый элемент. Лучше используйте общие переменные цвета, радиуса и тени. Если изменяете только одно свойство при наведении, задайте переход для этого свойства и учитывайте пользователей с предпочтением уменьшенной анимации. Сам генератор сознательно выдаёт статичный CSS: он не подменяет дизайн-систему проекта.

Эффект в узком контейнере может выглядеть иначе, чем в демонстрационном блоке. На телефоне большая тень займёт заметную часть экрана, а сильное скругление оставит меньше полезной площади для текста и изображений. Проверьте компонент на реальной ширине карточки и рядом с соседними элементами. Если тень обрезана, изучите overflow родителя; если градиент делает текст нечитаемым, измените цвета или добавьте однотонный слой под текст.

Скопированный код не зависит от JavaScript: он работает как обычное правило CSS. Поэтому после выбора параметров можно убрать генератор из рабочего процесса и хранить значения в стилях проекта. Для нескольких похожих карточек вынесите общие цвета и радиусы в переменные. Тогда изменение визуального языка сайта не потребует искать десятки вручную скопированных чисел.

Подберите один базовый набор значений для обычной карточки и отдельно — для выделенной. Сравните их рядом: если разница слишком тонкая, пользователь не увидит иерархию; если слишком сильная, интерфейс станет пёстрым. После выбора перенесите числа и цвета в общие переменные или токены проекта. Тогда изменение тени на десятках страниц потребует одной правки, а не ручного поиска каждого класса.

Генератор помогает получить синтаксически простой CSS, но не определяет, где эффект нужен. Проверьте карточку с длинным заголовком, пустым изображением, ошибкой и наведением. Убедитесь, что фон не снижает контраст текста. Для состояния фокуса интерактивных элементов не полагайтесь только на тень: видимый контур или другое ясное состояние помогает пользоваться интерфейсом с клавиатуры.

В светлой теме мягкая тёмная тень может отделять карточку от белого фона. В тёмной теме такая же тень часто почти незаметна; иногда лучше использовать тонкую границу или более светлый фон блока. Генератор показывает эффект на одном фоне, поэтому после копирования проверьте реальный компонент в обеих темах вашего сайта. Цвета градиента также должны сохранять читаемость текста, если он стоит поверх.

Допустим, базовый радиус карточки — 12px, а кнопок — 8px. Если случайно поставить 40px для одной карточки, она может выглядеть чужеродно. Сравнивайте значения с остальной дизайн-системой. Для тени начните с небольшого смещения и размытия, затем увеличивайте один параметр за раз: так понятнее, какая настройка меняет результат. После выбора сохраните CSS как переменные, чтобы следующая карточка не требовала ручной подгонки.

На мобильной ширине проверьте пространство вокруг карточки. Тень может выходить за пределы видимого контейнера или обрезаться родителем; скругление может скрыть край изображения, если оно вплотную к рамке. Генератор не видит структуру вашей страницы, поэтому финальная проверка в браузере обязательна. Если эффект требует сложной анимации, добавьте её отдельно и убедитесь, что интерфейс остаётся понятным без движения.

Если планируете повторять эффект в нескольких компонентах, запишите выбранные значения рядом с дизайн-токенами проекта. Назовите их по назначению — например, тень обычной карточки — вместо привязки к одной странице. Затем проверьте компонент с длинным и коротким содержимым, на узкой и широкой ширине. Это помогает понять, работает ли настройка как часть системы, а не только в демонстрационном прямоугольнике.

После проверки результата можно перейти к связанным задачам: CSS-форматировщик, Генератор фавиконок, Разработка интерфейсов. Используйте инструмент на настоящем образце перед публикацией результата.