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 не содержит контента, только стили контейнера.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

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

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

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

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