Softonic

Генератор CSS-карточек

Шаг 1 / 2

Название карты

Это предварительный просмотр вашей карты.

Далее

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

Как оформить контейнер карточки

  1. 1

    Выберите цвета

    Задайте цвет фона и цвет границы карточки.

  2. 2

    Определите форму

    Выберите скругление углов и внутренние отступы под ваш макет.

  3. 3

    Добавьте тень

    Настройте размытие и непрозрачность мягкой тени под карточкой.

  4. 4

    Просмотр и копирование

    Проверьте предпросмотр и скопируйте сгенерированный CSS класса .card в свою таблицу стилей.

Что содержит сгенерированный CSS

Инструмент создаёт один класс с именем .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background это выбранный цвет фона
  • border всегда сплошная линия 1 px выбранного цвета
  • border-radius и padding это ваши значения в px
  • box-shadow использует фиксированное смещение 4 px вниз и ваши значения размытия и непрозрачности

Предпросмотр это заглушка

В предпросмотре показаны заголовок и абзац, чтобы вы могли оценить пропорции. Инструмент не выводит HTML: примените класс к своему контейнеру и добавьте внутрь заголовок, текст, изображение или кнопки действий. Если карточка будет лежать на цветном фоне страницы, проверьте контраст границы там, а не только в предпросмотре.

Разумные пределы

Значения ниже нуля ограничиваются нулём, а непрозрачность тени остаётся в диапазоне от 0 до 1. Очень большие значения отступов или размытия могут дать неожиданный результат, поэтому держите настройки в пределах, которые вы использовали бы в реальном макете.

Комбинирование со своей разметкой

Минимальный пример для вашей страницы:

<div class="card">
  <h3>Название товара</h3>
  <p>Краткое описание</p>
</div>

Стиль контейнера не ограничивает содержимое: он отвечает только за фон, границу, отступы и тень.

Часто задаваемые вопросы

Нет. Он выдаёт только CSS-класс .card. Разметку сделайте сами, например div или article, оборачивающий заголовок, текст и действия.

Сгенерированная граница всегда сплошная, 1 px. Если нужна другая толщина или стиль, отредактируйте строку border в CSS.

Фиксированное вертикальное смещение 4 px делает тень мягкой и аккуратной. Вы управляете её мягкостью (размытие) и интенсивностью (непрозрачность).

Нет. Текст предпросмотра нужен только для отображения. Скопированный CSS не содержит контента, только стили контейнера.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Конвертер из формата HEX в ASCII

Преобразует последовательности шестнадцатеричных байтов в текст в формате ASCII. Отлично подходит для отладки протоколов, обратного инженеринга и решений задач типа CTF.

Инструмент доступен на других языках