Инструменты
Генераторы и калькуляторы для повседневной вёрстки: настройте результат, скопируйте готовый CSS и поделитесь ссылкой на настройку.
- Генератор градиентов Линейные, радиальные и конические градиенты с любым числом точек и интерполяцией в современных цветовых пространствах.
- Генератор теней Тени блока и текста в несколько слоёв: сдвиг, размытие, растяжение, цвет с прозрачностью и внутренняя тень. Предпросмотр на светлом, тёмном и цветном фоне.
- Flexbox-песочница Меняйте свойства флекс-контейнера и отдельных элементов и сразу смотрите, как перестраивается раскладка. Главная и поперечная оси нарисованы на предпросмотре.
- Grid-генератор Задайте колонки, строки и промежутки сетки, нарисуйте области мышью или с клавиатуры — и получите готовый код с grid-template-areas.
- Калькулятор clamp() Плавная типографика и отступы: задайте размер на узком и широком экране — калькулятор подберёт clamp(), который плавно меняет размер между ними.
- Калькулятор специфичности Введите селекторы — калькулятор посчитает специфичность каждого, покажет, из чего она складывается, и какой селектор победит.
- Конвертер цветов и контраст Переводит цвет из любого формата CSS в hex, rgb, hsl, oklch и lab, проверяет контраст текста с фоном по WCAG и APCA и предупреждает, если цвет не помещается в sRGB.
- Редактор cubic-bezier() Настройте кривую плавности: тяните точки или вводите числа, сравнивайте движение с равномерным и копируйте готовую функцию.