Инструменты «CSS»

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

Тени, фильтры и отделка

Генератор CSS box-shadow

Создавайте box-shadow визуально с живым предпросмотром и копируйте CSS.

Генератор CSS text-shadow

Создавайте text-shadow с живым предпросмотром и копируйте CSS.

Генератор неоморфизма

Создавайте мягкие неоморфные тени с живым превью и копируйте.

Генератор Glassmorphism

Создайте CSS для карточки в стиле матового стекла с размытием, прозрачностью, насыщенностью и цветом оттенка.

Генератор CSS-фильтров

Создавайте CSS-фильтры ползунками с живым превью, затем копируйте.

Обводка текста CSS

Добавьте контур или обводку к тексту и скопируйте CSS.

Стилизатор полосы прокрутки CSS

Оформите пользовательскую полосу прокрутки и скопируйте CSS ::-webkit-scrollbar.

Фигуры, градиенты и фоны

Генератор CSS border-radius

Настройте радиус каждого угла с живым предпросмотром и скопируйте CSS.

Генератор CSS clip-path

Обрежьте элемент в распространённые фигуры и скопируйте CSS clip-path.

Генератор CSS-треугольников

Создайте треугольник на чистом CSS в любом направлении и скопируйте CSS.

Генератор CSS-градиентов

Создайте линейный или радиальный градиент с живым предпросмотром и скопируйте CSS.

CSS-узор для фона

Создайте CSS-узор фона из двух цветов и скопируйте его.

Макет и адаптивный дизайн

Песочница CSS Flexbox

Экспериментируйте со свойствами flexbox в живом предпросмотре и копируйте сгенерированный CSS.

Генератор CSS Grid

Создайте макет CSS grid с настраиваемыми столбцами, строками и отступом, с живым предпросмотром.

Конструктор CSS медиа-запросов

Создайте адаптивный @media-запрос с пресетами и скопируйте его.

Блок соотношения сторон CSS

Создайте адаптивный блок соотношения сторон с запасным вариантом на padding.

Многоколоночная вёрстка CSS

Создайте многоколоночную текстовую вёрстку CSS с разделительной линией.

Движение, трансформации и анимация

Генератор CSS Transform

Соберите translate, rotate, scale и skew в единый CSS transform с живым предпросмотром.

Генератор CSS-анимаций

Создайте анимацию по ключевым кадрам, смотрите превью и копируйте CSS.

Генератор CSS-кривых сглаживания

Выберите или постройте сглаживание cubic-bezier и воспроизведите его на анимированной точке предпросмотра.

Генератор CSS-спиннеров

Создайте чистый CSS-спиннер загрузки и скопируйте CSS.

Нет подходящих инструментов.

Другие категории