Инструменты CSS и дизайна
Визуальные генераторы и калькуляторы для фронтенд-разработчиков и разработчиков Webflow.
localКалькулятор clamp()Введите минимальный и максимальный размер и диапазон ширины экрана. Вы получите значение clamp(), которое…localГенератор CSS-анимаций при наведенииСоздавайте анимации при наведении для кнопок, карточек, ссылок и иконок. Выберите эффект, примерьте его на…localГенератор CSS @keyframesВизуальный редактор для @keyframes. Добавляйте ключевые кадры на таймлайне, задавайте трансформации,…localГенератор CSS-анимацийСоздавайте CSS-анимации на таймлайне ключевых кадров. Начните с одного из 50+ пресетов, просматривайте…localГенератор Cubic BezierЗадайте кривую easing, перетаскивая два маркера, и сравните её со стандартными easing. Нужна физика?…localГенератор CSS-лоадеровВыберите один из 13 спиннеров на чистом CSS, настройте размер, цвета, толщину и скорость и скопируйте…localКонвертер HEX в OKLCHВставьте HEX-цвет и получите его значение OKLCH для CSS. Используйте ползунки, чтобы точно настроить…localКонвертер OKLCH в HEXВставьте значение oklch(), и вы получите его HEX-эквивалент, а также RGB и HSL. Инструмент также сообщит,…localГенератор CSS-градиентовСоздайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового…localГенератор box-shadowДобавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке,…localPX в REM конвертерПереводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и…localSVG в JSXВставьте SVG из Figma, Illustrator или набора иконок и получите готовый React-компонент (JSX или TSX) с…localSVG в CSS конвертерВставьте SVG и получите компактный URL-закодированный data URI, а также готовые правила background-image и…localCSS Grid генераторЗадайте колонки, строки и отступы, затем выделите ячейки, чтобы создать области вроде header, sidebar и…localГенератор border-radiusСкруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно,…localCSS-генератор фильтровНастройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера…localГенератор CSS Clip-pathОбрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник,…localГенератор CSS-масокСделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и…localГенератор CSS-треугольниковСоздайте треугольник на чистом CSS для стрелки подсказки, указателя выпадающего меню или облачка речи:…localГенератор SVG блобовСоздавайте плавные органические блобы для фоновых изображений главных экранов, аватаров и иллюстраций.…localГенератор SVG-волнСоздавайте волнистые разделители секций для лендингов: добавляйте и удаляйте волны (до 6, у каждой свой…localГенератор CSS FlexboxСмотрите, что делает каждое свойство flexbox: задавайте направление, перенос, justify-content, align-items…localГенератор типографической шкалыВыберите базовый размер шрифта и коэффициент — малая терция, большая терция, чистая кварта, золотое…localГенератор SVG-узоровДобавьте разделам и карточкам тонкую текстуру с помощью бесшовных SVG-узоров: точки, сетки, диагональные…localГенератор CSS-кнопокСоздайте кнопку, которая хорошо выглядит в каждом состоянии. Начните с пресета — сплошной, контурной,…localГрадиент краёв изображения CSSПридайте фото и фоновым изображениям мягкие, затухающие края одним правилом CSS без редактирования…localCSS-виньеткаДобавьте виньетку — мягкое круглое затухание по краям — к фотографиям, карточкам и hero-секциям с помощью…localМаска формы для изображенияПоместите любое фото внутрь фигуры — звезды, сердца, шестиугольника, круга, стрелки, облачка… — с помощью…localГенератор разделителей секцийЗадайте секциям лендинга наклонные, изогнутые, стрелочные, волновые, зигзагообразные или фигурные края…localНаклонная секция CSSСоздавайте наклонные, скошенные или диагональные секции — популярный вид лендингов — одним правилом…localИзогнутый разделитель секцийСкруглите край hero-блока или секции с помощью изгиба — выпуклого, вогнутого, изогнутого угла, плавной…localЗигзаг-граница CSSСделайте зигзагообразный, пилообразный, фестончатый или ступенчатый край для секций, карточек, купонов и…localГенератор анимации частицДобавьте на любую страницу падающий снег, дождь, падающие звёзды, конфетти, лепестки, осенние листья,…localCSS-снегУстройте на своём сайте снегопад к праздникам: мягкий снег или снежинки, лёгкая поземка или метель.…localCSS-анимация дождяДобавьте дождь на страницу или в главный блок — от лёгкой мороси до косого ливня. Капли наклоняются по…localПадающие звёздыЗапустите метеоры, проносящиеся по ночному небу в фоновом блоке, или пусть фигурки звёзд плавно падают и…localCSS-конфеттиОтпразднуйте запуск, регистрацию или день рождения падающим конфетти, которое плавно кружится и…localКонвертер CSS в TailwindВставьте правила или объявления CSS и получите эквивалентные утилитарные классы Tailwind для каждого…localГенератор глассморфизмаСоздайте карточку с эффектом матового стекла с помощью ползунков и скопируйте кроссбраузерный CSS — с…localГенератор произвольных значений TailwindВставьте CSS и сразу получите правильный синтаксис скобок Tailwind: пробелы заменяются на подчёркивания,…localМасштабирование SVG viewBoxПриведите иконки к новому viewBox (например, 24×24), пересчитав реальные координаты внутри каждого path,…localПоиск SVG-иконокИщите среди более 70 000 SVG-иконок с открытым кодом — Lucide, Tabler, Heroicons, Phosphor, Bootstrap,…localSCSS в CSSВставьте SCSS или Sass с отступами и получите обычный CSS. Компиляция выполняется официальным движком Dart…localLESS в CSS компиляторВставьте код Less и получите обычный CSS, скомпилированный официальным движком Less.js прямо в браузере.…localHTML в JSXВставьте HTML — фрагмент, шаблон или SVG-иконку — и получите JSX, который можно сразу использовать в…localГенератор слайдеровНастраивайте карусель кликами, а не чтением документации: выберите библиотеку, задайте брейкпоинты,…localГенератор слайдера SwiperНастройте Swiper 11 в визуальном редакторе: адаптивные брейкпоинты, эффекты, автоплей, типы пагинации и…localГенератор слайдеров SplideПостройте доступную и лёгкую карусель Splide без чтения документации: задайте параметры, проверьте превью…localГенератор слайдеров Glide.jsСоздайте минимальную карусель Glide.js — легкий слайдер весом около 7 КБ без зависимостей — с адаптивными…localГенератор Slick SliderНастройте классическую карусель jQuery Slick: адаптивные настройки, centerMode, fade, автоплей, стрелки и…localCSS-кнопкиВыберите одну из 24 анимированных CSS-кнопок: с заливкой, рамками, свечением, бликами и объёмным нажатием.…localИконки бургер-менюВыберите одну из 16 анимированных кнопок-бургеров, которые превращаются в крестик, стрелку или минус.…localВыбор цветаВыберите любой цвет или возьмите его с экрана и скопируйте в формате HEX, RGB, HSL или OKLCH. Посмотрите…localГенератор веб-шрифтовПревратите шрифты для десктопа в быстрые веб-шрифты: конвертируйте в WOFF2 и WOFF, оставьте только нужные…localКонвертер TTF в WOFF2Конвертируйте TTF в WOFF2 — самый компактный формат для сайтов. Перетащите файлы, выполните конвертацию и…localOTF в WOFF2 конвертерКонвертируйте OTF в WOFF2 для вашего сайта. Перетащите файлы, сконвертируйте и скачайте. Нужны CSS или…localWOFF2 в TTF конвертерПревратите файл WOFF2 или WOFF обратно в TTF или OTF, исходный формат. Это полезно, если вы потеряли…localСабсеттер шрифтовСделайте шрифт заметно меньше, удалив символы, которые вы не используете. Выберите набор языков или…
Не хватает инструмента: CSS?
Расскажите, что нужно — мы создаём самые запрашиваемые инструменты в первую очередь, и это бесплатно.