Живой Превью

Смотрите как ваши стили выглядят на реальных элементах интерфейса

Заголовки

Заголовок 1 - Главный заголовок

Заголовок 2 - Заголовок раздела

Заголовок 3 - Подзаголовок

Заголовок 4 - Малый заголовок

Заголовок 5 - Очень малый заголовок
Заголовок 6 - Микро заголовок

Текст и Ссылки

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

Другой параграф с жирным текстом и курсивным текстом. Ссылки: Основная ссылка, Посещённая ссылка, Ссылка при наведении.

Кнопки

Списки

Маркированный список

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка с длинным текстом для демонстрации переноса
  • Четвертый элемент списка

Нумерованный список

  1. Основное действие
  2. Дополнительное действие
  3. Третье действие с более длинным описанием
  4. Четвертое действие

Элементы формы

Управление стилями

Светлая Тёмная

Как использовать:

  • Используйте ползунки для изменения размеров и отступов
  • Выберите цвет из палитры и нажмите на него для точной настройки
  • Изменения применяются сразу к элементам превью
  • Переключайте тему для просмотра в светлом/тёмном режиме
16px
1.5

Нажмите на цвет для точной настройки

6px
16px
12px
15% темнее
25% темнее

Сгенерированный CSS

/* CSS будет сгенерирован здесь */

Палитра цветов

#4a6fa5
215
40%
50%