Генератор скруглений и теней CSS онлайн
Генератор border-radius и box-shadow: скругления, до 5 слоёв теней, 16 готовых вариантов и примеры карточки, кнопки и поля. CSS и HTML.
Настройте скругления и тени CSS на живом примере: карточке, кнопке, фигуре или поле ввода. Выберите готовый вариант или соберите свой, измените фон и оформление, затем скопируйте CSS и HTML.
ИНСТРУМЕНТЫ ДЛЯ ВЕБА
Форма. Свет. Детали.
Скругления и тени, которые можно сразу примерить. Настройте элемент, соберите слои и заберите готовые CSS и HTML.
Начните с готового решения
Форма меняет геометрию, тень — слои. Текст, заливка и фон сохраняются.
Ваш пример
ЖИВОЙ ПРЕДПРОСМОТРФон окружения служит только для предпросмотра. На узком экране ширина элемента ограничена доступным местом.
Готовый код
БЕЗ БИБЛИОТЕКДобавьте элементу класс my-box. Скачанный CSS уже содержит этот селектор.
Скругления
px задают постоянный радиус, % зависят от размеров элемента. При смене единицы число сохраняется, это не перевод величин.
Радиус всех углов
Вертикальный радиус
В CSS: четыре горизонтальных радиуса / четыре вертикальных. Порядок — от верхнего левого угла по часовой стрелке.
Тени
До пяти слоёв. Первый расположен сверху; порядок в списке совпадает с CSS.
Тени выключены. Слои сохранены и вернутся после включения.
Оформление примера
В режиме поля ввода этот текст — начальное значение. В предпросмотре поле доступно только для чтения.
Минимальная высота может вырасти, чтобы вместить текст. Пустой текст подходит для декоративной фигуры.
Как использовать результат
- 01
Выберите форму
Свяжите углы для равномерного скругления или настройте каждый отдельно. Для сложного силуэта включите эллиптические радиусы.
- 02
Соберите тень
Меняйте смещение, размытие и непрозрачность. Добавляйте слои постепенно: мягкая широкая тень и небольшая плотная часто работают вместе.
- 03
Перенесите код
Скопируйте HTML, подключите скачанный CSS или добавьте свойства в свой класс. Проверьте результат на настоящем фоне страницы.
Что полезно знать
Почему 50% иногда даёт овал, а не круг?
Радиус в процентах зависит от ширины и высоты элемента. Для круга нужны одинаковые размеры и радиус 50%; если текст увеличивает высоту, пропорции изменятся.
Что означает косая черта в border-radius?
Слева от / указаны горизонтальные радиусы углов, справа — вертикальные. Так можно получить эллиптические скругления. Браузер сам уменьшает слишком большие пересекающиеся радиусы.
В каком порядке рисуются тени?
Первый слой в списке CSS расположен сверху. Внутренняя тень inset рисуется внутри элемента. Отрицательное расширение уменьшает область тени, а непрозрачность 0% делает слой невидимым.
Почему тень обрезается на моей странице?
Проверьте родительский контейнер: overflow: hidden или clip может обрезать внешнюю тень. Оставьте вокруг элемента место и учитывайте стили своего сайта. Сам box-shadow не меняет размер блока в раскладке.
Данные куда-то отправляются?
Все настройки и создание кода выполняются в вашем браузере. Генератор не отправляет введённый текст на сервер и не сохраняет его после перезагрузки страницы.
Нужен более сложный фон? Попробуйте генератор CSS-градиентов: там доступны линейные, радиальные и конические переходы, повторяющиеся узоры и дополнительные примеры оформления.
