Дизайн и CSS
Визуальная генерация CSS: тени, градиенты, раскладки flexbox и grid, анимации и цветовые палитры
Собирайте CSS визуально и копируйте код: тени блоков и текста, градиенты и mesh-градиенты, раскладки flexbox и grid, скругление углов, clip-path, фильтры, трансформации, анимации, эффекты glassmorphism и neumorphism. Генераторы палитр и оттенков помогут построить согласованную цветовую систему, а генераторы SVG-волн, клякс (blob) и узоров создают лёгкие фоны.
Инструментов в категории: 18
С чего начать
Все инструменты категории
-
Генератор CSS-анимаций
Создавайте CSS-анимации @keyframes из пресетов или своих кадров: длительность, задержка, повторы, направление, fill mode и кривая cubic-bezier.
-
Генератор border-radius
Генерируйте CSS border-radius с независимыми углами, эллиптическими радиусами X/Y, единицами px или % и blob-пресетами. Самая короткая запись.
-
Генератор clip-path
Создавайте формы CSS clip-path: многоугольники с перетаскиваемыми точками и пресетами, круг, эллипс и inset со скруглением. Предпросмотр и код.
-
Генератор цветовых палитр
Создавайте палитры из базового цвета: комплементарные, аналоговые, триадные, тетрадные, квадратные и монохромные гармонии. Экспорт в CSS и Tailwind.
-
Генератор оттенков цвета
Превратите один цвет в шкалу 50–950 в стиле Tailwind, а также в tints, shades и tones. Расчёт в OKLCH и sRGB, экспорт в CSS, Tailwind или JSON.
-
Генератор CSS box-shadow
Создавайте CSS box-shadow визуально: несколько слоёв, смещение, размытие, растяжение, inset и прозрачность RGBA. Живой предпросмотр и готовый код.
-
Генератор CSS Flexbox
Настраивайте направление, перенос, выравнивание и отступы flex-контейнера, а также рост, порядок и выравнивание каждого элемента визуально. Готовый CSS-код.
-
Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты с точками цвета, углами, повторением и интерполяцией OKLCH. Предпросмотр и готовый код.
-
Генератор CSS Grid
Стройте CSS Grid визуально: grid-template-columns/rows, именованные области с проверкой, отступы, выравнивание и размещение элементов. Чистый CSS.
-
Генератор CSS-фильтров
Комбинируйте функции CSS-фильтров: размытие, яркость, контраст, оттенки серого, сепия, инверсия, поворот оттенка и тень на примере или своём изображении.
-
Генератор glassmorphism
Генерируйте CSS матового стекла: backdrop-filter с размытием и насыщенностью, оттенок и прозрачность, рамка и тень, включая префикс -webkit- для Safari.
-
Генератор Mesh-градиентов
Создавайте мягкие mesh-фоны на CSS из наложенных радиальных градиентов. Перетаскивайте точки, задавайте охват, случайный seed и копируйте код.
-
Генератор неоморфизма
Генерируйте CSS мягкого интерфейса (neumorphism): светлая и тёмная тени из базового цвета, плоская, вогнутая, выпуклая и вдавленная форма, 4 источника света.
-
Генератор CSS-паттернов
Создавайте фоновые CSS-паттерны без картинок: точки, горох, полосы, шахматка, сетка, зигзаг и штриховка. Цвета, размер плитки и толщина линий.
-
Генератор SVG-blob
Создавайте плавные органические SVG-blob с настраиваемым числом точек, случайностью и seed. Заливка сплошная, градиентом или контур; .svg и CSS data URI.
-
Генератор SVG-волн
Генерируйте плавные, острые или ступенчатые SVG-волны со слоями, амплитудой и seed. Скачайте .svg или скопируйте как CSS data URI для разделителей секций.
-
Генератор text-shadow
Создавайте CSS text-shadow из нескольких слоёв: свечение, контур, ретро-3D и рельефный текст. Живой предпросмотр на вашем тексте и готовый код.
-
Генератор CSS transform
Генерируйте значения CSS transform: сдвиг, поворот, масштаб, наклон, а также 3D-перспективу, повороты по осям X и Y и сдвиг по Z, с точкой трансформации.
Другие категории
- CRC Алгоритмы циклической избыточной проверки для обнаружения ошибок
- MD Алгоритмы дайджеста сообщений (MD2, MD4, MD5)
- SHA-1 Защищенный алгоритм хеширования 1 - 160-битная хеш-функция
- SHA-2 Семейство защищенного алгоритма хеширования 2 (SHA-224, SHA-256, SHA-384, SHA-512)
- SHA-3 Защищенный алгоритм хеширования 3 на основе Keccak
- Keccak Криптографическая хеш-функция Keccak
- SHAKE Функции с расширяемым выходом (SHAKE128, SHAKE256)
- cSHAKE Настраиваемые функции SHAKE
- KMAC Код аутентификации сообщений Keccak
- Пароли и безопасность Инструменты генерации, анализа, хеширования и безопасности паролей
- Шифрование и криптография Симметричное и асимметричное шифрование, HMAC и генерация ключей (AES, 3DES, RSA, PGP)
- Кодирование Кодирование и декодирование данных: Base64, Base32, Base58, URL, HTML-сущности, hex, Unicode и другое
- Форматирование кода Форматирование, минификация и проверка кода и данных (JSON, XML, YAML, SQL, HTML, CSS), смена стиля имён
- Генераторы Генерация идентификаторов, ключей, тестовых данных, QR-кодов, штрихкодов и конфигов (UUID, API-ключи, .gitignore, Dockerfile)
- Конвертеры Конвертация форматов данных, систем счисления, цветов, меток времени, единиц и валют (JSON, CSV, YAML, XML)
- Текстовые инструменты Подсчёт, сравнение, очистка и преобразование текста (число слов, diff, regex, регистр, дубликаты)
- Инструменты для изображений Инструменты для манипулирования и преобразования изображений (Сжатие, Изменение размера, Преобразование)
- Веб-инструменты Инструменты для веб-разработки и SEO (JWT, URL, DNS, HTTP-заголовки, метатеги, карты сайта)
- Математика и калькуляторы Калькуляторы для финансов, здоровья, процентов, программистской арифметики и повседневной математики
- Время и дата Часовые пояса, разница между датами, рабочие дни, таймеры, секундомер и мировые часы