CSS-инструменты для дизайна онлайн

CSS-инструменты для дизайна онлайн

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

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

Ознакомьтесь также с другими категориями инструментов: текстовые инструменты, конвертеры и генераторы.

Преимущества CSS-инструментов txtly.ru

• Бесплатно и без регистрации — никаких скрытых платежей, подписок и ограничений по использованию
• Живой предпросмотр — все изменения отображаются мгновенно, не нужно обновлять страницу или переключаться между редактором и браузером
• Готовый CSS-код — каждый генератор выдаёт production-ready CSS, готовый к вставке в ваш проект
• Копирование в один клик — результат копируется в буфер обмена нажатием одной кнопки
• Адаптивный дизайн — инструменты одинаково удобны на компьютере, планшете и смартфоне
• Точность — значения выводятся с пиксельной точностью, поддерживаются все современные CSS-свойства

Как пользоваться CSS-инструментами

1. Выберите нужный инструмент из списка ниже или через меню навигации
2. Настройте параметры — двигайте ползунки, выбирайте цвета, меняйте значения
3. Смотрите на предпросмотр — результат виден сразу, в реальном времени
4. Скопируйте CSS-код — и вставьте в ваш проект

Подборщик цветов (Color Picker)

Что это такое

Подборщик цветов — интерактивный инструмент для выбора, анализа и конвертации цветов между форматами HEX, RGB и HSL. В отличие от системного палитрового окна, подборщик txtly.ru предоставляет полноценный цветовой круг, ручной ввод значений и возможность сохранения палитры из нескольких цветов.

Теория цвета

Понимание цветовых моделей помогает осознанно работать с цветом:

• HEX — шестнадцатеричное представление: `#RRGGBB`, где каждая пара символов (00–FF) задаёт интенсивность красного, зелёного и синего каналов. Пример: `#FF5733` — яркий оранжево-красный. Это самый распространённый формат в CSS.
• RGB — явное указание трёх каналов в десятичной форме: `rgb(255, 87, 51)`. Каждый канал принимает значения от 0 до 255. Современный синтаксис также поддерживает `rgb(255 87 51)` без запятых.
• RGBA — RGB с альфа-каналом (прозрачностью): `rgba(255, 87, 51, 0.5)`, где 0 — полностью прозрачный, 1 — непрозрачный.
• HSL — Hue (оттенок, 0–360°), Saturation (насыщенность, 0–100%), Lightness (светлота, 0–100%): `hsl(12, 100%, 60%)`. Интуитивно ближе к тому, как человек воспринимает цвет — удобно для создания оттенков и гармоничных схем.
• HSLA — HSL с альфа-каналом: `hsla(12, 100%, 60%, 0.5)`.

Цветовая доступность (Accessibility)

Важный аспект работы с цветом — контрастность текста на фоне. Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает минимальные требования:

Белый текст (`#FFFFFF`) на оранжевом фоне (`#FF5733`) имеет контрастность около 3.2:1 — недостаточно для обычного текста. Чёрный текст (`#000000`) на том же фоне — около 6.5:1, что проходит уровень AA.

При выборе цветов для интерфейса всегда проверяйте контрастность, особенно для текста, кнопок и элементов форм.

Когда использовать

• Дизайн интерфейсов — подбор основного и акцентного цветов для сайта или приложения
• Брендинговые цвета — точное определение HEX-кода фирменного цвета из логотипа или макета
• Создание палитры — сохранение нескольких гармонирующих цветов для дальнейшего использования в проекте
• Конвертация форматов — перевод цвета из HEX в RGB (для JavaScript/Canvas) или в HSL (для программного изменения оттенка)
• Светлая/тёмная тема — создание вариантов цвета для светлой и тёмной тем интерфейса с помощью HSL (изменение Lightness)

Пример подбора цвета

Задача: подобрать приятный синий цвет для кнопок сайта в HEX, RGB и HSL.

Решение:

1. С помощью цветового круга выбран оттенок 210° (синий)
2. Насыщенность 80% — достаточно ярко, но не кислотно
3. Светлота 55% — комфортно для глаз, не слишком тёмный
4. Результат: `#1E88E5`, `rgb(30, 136, 229)`, `hsl(210, 80%, 51%)`

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

Какой формат лучше использовать в CSS? HEX — самый компактный и распространённый, идеален для статических значений. RGB/RGBA — для случаев, когда нужна прозрачность. HSL — когда нужно программно менять оттенок, насыщенность или яркость (например, при наведении: `hsl(210, 80%, 55%) → hsl(210, 80%, 45%)`). Современный CSS также поддерживает `color(display-p3 ...)` для расширенного цветового охвата, но поддержка браузерами пока неполная.

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

Что такое «безопасные» веб-цвета? В эпоху 256-цветных мониторов существовала палитра из 216 «безопасных» цветов, которые отображались одинаково на всех устройствах. Сегодня это понятие устарело: современные экраны отображают миллионы цветов. Можно использовать любые HEX-значения без опасений.

Открыть подборщик цветов →

Генератор CSS-градиентов

Что это такое

Генератор CSS-градиентов — визуальный инструмент для создания плавных цветовых переходов с помощью CSS-свойства `background-image: linear-gradient()`, `radial-gradient()` или `conic-gradient()`. Все параметры — цвета, углы, остановки — настраиваются через визуальный интерфейс, а на выходе вы получаете готовый CSS-код.

Градиенты — мощный инструмент современного веб-дизайна, позволяющий создавать глубину, объём и визуальный интерес без использования растровых изображений.

Типы градиентов

Линейный градиент (linear-gradient): Цвета переходят вдоль прямой линии. Задаётся угол наклона или ключевое слово направления.

/* Под углом 135° (из левого нижнего в правый верхний) */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Слева направо */
background: linear-gradient(to right, #ff758c, #ff7eb3);

Радиальный градиент (radial-gradient): Цвета расходятся от центра к краям кругом или эллипсом. Можно задать форму, размер и положение центра.

/* Круглый градиент от центра */
background: radial-gradient(circle, #667eea, #764ba2);

/* Эллиптический, центр смещён в левый верхний угол */
background: radial-gradient(ellipse at top left, #ff758c, #ff7eb3);

/* С указанием размера: closest-side, farthest-corner и т.д. */
background: radial-gradient(circle closest-corner at 50% 50%, #667eea, #764ba2);

Конический градиент (conic-gradient): Цвета распределяются по кругу вокруг центральной точки — как циферблат или круговая диаграмма.

/* Конический градиент от 0° */
background: conic-gradient(#667eea, #764ba2, #667eea);

/* С заданным начальным углом */
background: conic-gradient(from 90deg, #ff758c, #ff7eb3, #ff758c);

/* В центре элемента */
background: conic-gradient(at 50% 50%, #667eea, #764ba2, #667eea);

Цветовые остановки (Color Stops)

Цветовая остановка определяет, в какой точке градиента появляется конкретный цвет. Можно задавать позицию в процентах или пикселях:

/* Три остановки: красный на 0%, жёлтый на 50%, синий на 100% */
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);

/* Жёсткая граница между цветами (остановки в одной точке) */
background: linear-gradient(to right, red 50%, blue 50%);

/* Множественные остановки для сложных эффектов */
background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 70%, #f5576c 100%);

Практические применения

• Фоны секций — современная альтернатива однотонным фонам и фоновым изображениям. Градиент не увеличивает размер страницы, в отличие от картинок.
• Кнопки — градиентные кнопки выглядят объёмнее и привлекательнее однотонных. Пример: `linear-gradient(to right, #667eea, #764ba2)`.
• Оверлеи для изображений — полупрозрачный градиент поверх фонового изображения улучшает читаемость текста: `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1))`.
• Разделители секций — плавные переходы между секциями страницы через градиенты с прозрачностью.
• Скелетоны (загрузка) — анимированные градиенты создают эффект shimmer при загрузке контента.

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

Поддерживаются ли градиенты во всех браузерах? CSS-градиенты поддерживаются всеми современными браузерами без префиксов, начиная с Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+. Конические градиенты (`conic-gradient`) имеют чуть более позднюю поддержку (Chrome 69+, Safari 12.1+), но IE11 не поддерживает их вовсе. Для устаревших браузеров рекомендуется указывать запасной однотонный цвет: `background: #667eea; background: linear-gradient(...)`.

Можно ли анимировать градиенты через CSS? Напрямую анимировать градиенты нельзя — свойство `background-image` не поддерживает `transition`. Однако можно использовать псевдоэлемент с градиентом и анимировать его `opacity`, либо использовать `@keyframes` с `background-position` на увеличенном фоне. Современный подход — регистрация пользовательского свойства через `@property` и анимация цветовых остановок.

Сколько цветовых остановок можно использовать? Технически ограничений нет — можно задать любое количество остановок. Практически для большинства дизайнерских задач достаточно 2–4 цветов. Больше 5 остановок обычно создают излишне пёстрый эффект, если это не специальный художественный приём.

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

Открыть генератор градиентов →

Генератор CSS-теней (Box Shadow)

Что это такое

Генератор CSS-теней — визуальный инструмент для создания свойства `box-shadow` с живым предпросмотром. Тени придают элементам глубину, выделяют их на странице и являются ключевым элементом современного UI-дизайна, особенно в концепции Material Design.

Параметры box-shadow

Свойство `box-shadow` принимает до шести параметров:

box-shadow: offset-x offset-y blur spread color inset;

Несколько теней

Можно указать несколько теней через запятую — для создания сложных эффектов:

/* Двойная тень: близкая + дальняя для реалистичного эффекта */
box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.12),
  0 1px 2px rgba(0, 0, 0, 0.24);

Уровни теней Material Design

Material Design от Google определяет стандартные уровни возвышения (elevation), каждому из которых соответствует определённая тень:

Для имитации источника света сверху-спереди (стандартный подход Material Design), offset-y всегда должен быть больше offset-x (тень падает вниз, а не строго под элемент).

Когда использовать

• Карточки (cards) — лёгкая тень (`0 2px 4px`) приподнимает карточку над фоном
• Кнопки — тень создаёт эффект кликабельности; в состоянии `:active` используйте меньшую тень или `inset` для эффекта нажатия
• Модальные окна — глубокая тень затемняет фон и выделяет модальное окно
• Навигация — тень под навбаром визуально отделяет его от содержимого
• Состояния hover/focus — увеличение тени при наведении даёт интерактивную обратную связь
• Неоморфизм (Neumorphism) — комбинация светлой и тёмной теней создаёт мягкий 3D-эффект

Пример: неоморфная кнопка

/* Неоморфизм: светлая тень сверху-слева, тёмная снизу-справа */
box-shadow:
  8px 8px 16px rgba(0, 0, 0, 0.1),
  -8px -8px 16px rgba(255, 255, 255, 0.8);

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

Можно ли использовать box-shadow для создания рамок? Да, тень без размытия и сдвига с положительным spread создаёт эффект рамки: `box-shadow: 0 0 0 2px #667eea` — синяя «рамка» в 2px. В отличие от `border`, тень не влияет на размеры элемента и не сдвигает соседние элементы.

Влияет ли box-shadow на производительность? Тени с большим blur (50px+) могут вызывать проблемы с производительностью при анимации или скролле на слабых устройствах, так как браузеру приходится перерисовывать значительную область. Используйте `will-change: box-shadow` для оптимизации анимированных теней, но не злоупотребляйте.

Чем box-shadow отличается от filter: drop-shadow()? `box-shadow` следует форме bounding box элемента (прямоугольник). `filter: drop-shadow()` применяется к видимым пикселям элемента и работает с прозрачностью — для PNG-изображений с прозрачным фоном тень будет повторять контур объекта, а не прямоугольника.

Открыть генератор теней →

Генератор border-radius

Что это такое

Генератор border-radius — визуальный инструмент для создания скруглённых углов с раздельным контролем каждого из четырёх углов. Свойство `border-radius` — одно из самых часто используемых в современном веб-дизайне, позволяющее превратить прямоугольные блоки в скруглённые карточки, кнопки-пилюли и даже круги.

Синтаксис border-radius

Сокращённая запись (shorthand):

/* Все 4 угла — одинаковое скругление */
border-radius: 10px;

/* top-left/bottom-right и top-right/bottom-left */
border-radius: 10px 20px;

/* top-left, top-right/bottom-left, bottom-right */
border-radius: 10px 20px 30px;

/* Каждый угол отдельно: top-left, top-right, bottom-right, bottom-left */
border-radius: 10px 20px 30px 40px;

Развёрнутая запись (longhand) — контроль каждого угла отдельно:

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

Эллиптические скругления (два значения через `/`):

/* Горизонтальный радиус / Вертикальный радиус */
border-radius: 20px / 40px;

/* Разные горизонтальные и вертикальные радиусы для каждого угла */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;

Популярные пресеты

Когда использовать

• Кнопки — скруглённые кнопки выглядят дружелюбнее и современнее прямоугольных. Пилюли (`border-radius: 9999px`) — тренд последних лет в UI-дизайне (macOS Big Sur+, Tailwind UI, shadcn/ui)
• Карточки — скругление 8–16px придаёт карточкам мягкость. Чем больше радиус — тем «игривее» дизайн
• Аватарки — `border-radius: 50%` создаёт круглые аватарки (изображение должно быть квадратным)
• Поля ввода — скруглённые инпуты (4–8px) выглядят аккуратнее прямоугольных
• Изображения — скругление углов изображений делает их визуально мягче и органичнее вписывает в дизайн
• Модальные окна — скруглённые углы (12–16px) придают модальным окнам современный вид

Пример: карточка товара

.product-card {
  border-radius: 16px;
  overflow: hidden; /* важно: обрезает содержимое по границе скругления */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-card img {
  border-radius: 16px 16px 0 0; /* скругление только сверху */
}

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

В каком порядке задаются значения в сокращённой записи? По часовой стрелке, начиная с верхнего левого угла: `top-left`, `top-right`, `bottom-right`, `bottom-left`. Это стандартный порядок для всех CSS-свойств, связанных с направлением (margin, padding, border-radius).

Почему border-radius: 9999px лучше, чем border-radius: 50%? Для круглых кнопок-пилюль `border-radius: 50%` создаст эллиптическое скругление, если кнопка не квадратная (ширина ≠ высота), в то время как `9999px` — это достаточно большое значение, которое гарантирует полностью скруглённые края при любой ширине кнопки (браузер уменьшает радиус автоматически, когда он превышает половину размера элемента).

Как работает overflow: hidden с border-radius? Если у элемента есть скруглённые углы, но нет `overflow: hidden`, его содержимое (текст, изображения) может выходить за границы скруглений и отображаться в углах. `overflow: hidden` обрезает содержимое по кривой скругления — это критически важно для карточек с изображениями.

Можно ли анимировать border-radius? Да, `border-radius` отлично анимируется через `transition` или `@keyframes`. Пример: `transition: border-radius 0.3s ease` — при наведении можно увеличивать или уменьшать скругление. Это часто используется для эффектов hover на кнопках и карточках.

Открыть генератор скруглений →

Генератор CSS-фильтров

Что это такое

Генератор CSS-фильтров — визуальный инструмент для настройки свойства `filter`, применяющего графические эффекты к элементу: размытие, изменение яркости, контрастности, насыщенности и другие. Фильтры работают аналогично фильтрам в графических редакторах и применяются непосредственно браузером.

Все функции filter

Свойство `filter` принимает одну или несколько функций, перечисленных через пробел:

Комбинирование фильтров

Фильтры можно комбинировать — они применяются последовательно, слева направо. Порядок важен:

/* Размытая, обесцвеченная и затемнённая картинка */
filter: blur(2px) grayscale(100%) brightness(70%);

/* Яркое, насыщенное изображение с лёгкой тенью */
filter: brightness(110%) contrast(120%) saturate(150%) drop-shadow(0 4px 8px rgba(0,0,0,0.2));

Популярные эффекты с фильтрами

Эффект размытого фона (glassmorphism):

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px); /* размытие фона под элементом */
  border-radius: 16px;
}

Обратите внимание: `backdrop-filter` размывает фон позади элемента, тогда как `filter` применяется к самому элементу.

Hover-эффект для изображений:

.image-card img {
  filter: grayscale(100%) brightness(90%);
  transition: filter 0.4s ease;
}

.image-card:hover img {
  filter: grayscale(0%) brightness(100%);
}

Создание иконки произвольного цвета из чёрной SVG-иконки:

/* Чёрная иконка → красная через комбинацию фильтров */
.icon-red {
  filter: invert(28%) sepia(95%) saturate(7489%) hue-rotate(352deg) brightness(94%) contrast(116%);
}

Когда использовать

• Изображения — применение художественных эффектов к фотографиям без редактирования в Photoshop: обесцвечивание, сепия, изменение яркости
• Hover-эффекты — плавное изменение изображений при наведении курсора (`transition: filter 0.3s`)
• Тёмная тема — инверсия цветов изображений в тёмной теме сайта
• Состояния загрузки — размытие и затемнение контента во время загрузки или блокировки
• Декоративные эффекты — создание уникальных визуальных стилей без использования графических редакторов
• Производительность — `filter` может быть производительнее, чем canvas-обработка для простых эффектов, так как использует GPU-ускорение

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

Влияют ли фильтры на производительность? Да, фильтры, особенно `blur()` и `drop-shadow()`, используют GPU-ускорение, но могут быть ресурсоёмкими при большом количестве анимированных элементов. Рекомендуется использовать `will-change: filter` для элементов с анимированными фильтрами и избегать `blur(20px+)` на больших изображениях. Для статических элементов влияние на производительность минимально.

Чем отличается filter: opacity() от свойства opacity? Функционально они похожи, но `filter: opacity()` в некоторых браузерах обрабатывается GPU и может работать быстрее в составе цепочки фильтров. Однако `opacity` — более стандартное и предсказуемое решение. Главное различие: `filter: opacity()` является частью контекста наложения (stacking context), что может повлиять на z-index.

Можно ли анимировать фильтры? Да, все функции `filter` поддерживают анимацию через `transition` и `@keyframes`. Пример: `transition: filter 0.3s ease`. Это позволяет создавать плавные hover-эффекты, например, обесцвечивание изображения при наведении.

Как применить фильтр только к фону, не затрагивая содержимое? Используйте `backdrop-filter` вместо `filter`. `backdrop-filter` применяет эффекты к области позади элемента, не затрагивая сам элемент и его содержимое. Поддерживается всеми современными браузерами, кроме Firefox — для Firefox можно задать запасной полупрозрачный фон.

Открыть генератор фильтров →

Другие полезные инструменты

Освоив CSS-инструменты для дизайна, обратите внимание на текстовые инструменты — валидаторы YAML и JSON, сравнение текстов и конвертеры регистра пригодятся при работе с конфигурациями и контентом. Для генерации контента используйте генераторы — паролей, UUID, случайных чисел и текстов-рыб.

При создании полноценных страниц вам также пригодятся конвертеры единиц измерения для перевода пикселей в rem/em и другие величины, а математические калькуляторы — для расчёта пропорций и размеров.