Генератор CSS онлайн: тени, градиенты, палитры

Первая группа отдаёт готовый CSS для внешнего вида блока — её открывают, когда проще подвигать ползунки, чем подбирать значения вслепую. Тень настраивают «Генератор CSS box-shadow» с несколькими слоями и «Генератор text-shadow» для надписей. Форму задают «Генератор border-radius» и «Генератор clip-path CSS», где точки фигуры перетаскиваются мышью. Заливку собирает «Генератор CSS-градиентов», обработку картинки — «Генератор CSS filter». Два инструмента делают целые стили: «Генератор Glassmorphism CSS» — эффект матового стекла, «Генератор нейморфизм CSS» — мягкие поверхности четырёх видов: плоские, вогнутые, выпуклые и вдавленные. Движение закрывают «Генератор CSS Transform» для поворота, сдвига и масштаба и «Генератор CSS-анимаций» с набором готовых пресетов.

Вторая группа про раскладку и размеры. Двумерную сетку с колонками и строками рисует «CSS Grid калькулятор» — прямо на превью, с готовым кодом внизу. Ряд по одной оси, где элементы делят между собой свободное место, собирает «Генератор Flexbox CSS». Размеры считают четыре калькулятора: «Конвертер CSS-единиц» переводит пиксели в em, rem, проценты и единицы вьюпорта с учётом контекста, «Калькулятор CSS clamp()» собирает значение, которое само тянется между минимумом и максимумом без медиазапросов, «Калькулятор модульной шкалы» выстраивает соразмерный ряд кеглей от базового размера. Рядом «Калькулятор межстрочного интервала» — он про line-height в вёрстке и оценку числа строк на листе А4, а не про настройки текстового редактора, и это стоит учитывать, если вы пришли сюда за оформлением документа.

Третья группа — цвет и уборка кода. Перевести значение между HEX, RGB, HSL, HSV и CMYK умеет «Конвертер цветов», рассмотреть конкретный код — «Просмотр HEX цвета» и «Просмотр RGB цвета», подобрать сочетание — «Генератор цветов HTML» и «Совместимость цветов» с симуляцией дальтонизма. Ступени одного тона строит «Генератор оттенков и тонов» с выгрузкой в CSS, SCSS и Tailwind, случайную палитру выдаёт «Генератор случайных цветов», а готовые наборы лежат в «Таблице цветов Flat Design» и «Таблице безопасных цветов». Контраст считают «Проверка контраста цветов» и «Проверка контраста цветов (WCAG)» — обе по одному стандарту WCAG 2.1. Символы и значки без картинок берут в «HTML пиктограммах», а перед выкладкой стили прогоняют через «Оптимизацию CSS» и «Очистку и компрессию кода».