CSS и дизайн

CSS-свойства вроде box-shadow или clip-path проще подобрать глазами, чем числами. Генераторы раздела показывают результат на живом превью, пока вы двигаете ползунки, и отдают готовый код — его остаётся вставить в стили. Рядом собраны инструменты для цвета и типографики: из них получаются переменные для дизайн-системы.

Генераторы свойств

• Генератор CSS-градиента — линейный или радиальный, от двух до пяти цветов, угол и позиции.
• Генератор box-shadow — несколько теней друг на друге, размытие, растяжение, прозрачность, внутренняя тень.
• Генератор border-radius — все углы сразу или каждый отдельно.
• Генератор clip-path — 15 готовых форм: треугольник, ромб, многоугольники, звезда, стрелка, шеврон, круг, эллипс.
• Конструктор Flexbox — направление, выравнивание, перенос и отступы на блоках-примерах.
• Генератор CSS-анимации — появление, отскок, тряска, пульсация, вращение, выезд; длительность, повторы, кривая.

Цвет и типографика

• Палитра из HEX — оттенки от 50 до 950 из одного цвета, комплементарная, аналогичная и триадная схемы, CSS-переменные.
• HEX ↔ RGB ↔ HSL — перевод цвета между форматами.
• Проверка контрастности WCAG — соответствие уровням AA и AAA для обычного и крупного текста.
• Типографическая шкала — девять размеров шрифта от text-xs до text-5xl по выбранному соотношению, по умолчанию 1,25 от базы 16 px.
• Конвертер px → rem / em / vw — с вашим базовым размером шрифта и шириной экрана.
• CSS minifier и beautifier — сжатие стилей или форматирование, экономия в процентах.

Пороги контраста

По WCAG обычный текст должен контрастировать с фоном не меньше 4,5:1 для уровня AA и 7:1 для AAA. Для крупного текста — от 24 px или от 18,7 px жирным — достаточно 3:1 и 4,5:1. Серый #767676 на белом даёт 4,54:1 — это самый светлый серый, который ещё проходит AA для основного текста. Шкала шрифтов строится умножением: при соотношении 1,25 (Major Third) и базе 16 px следующие ступени — 20, 25 и 31,25 px.