100% в браузере
Инструменты «CSS»
Генерируйте чистый CSS для копирования визуально с помощью этих бесплатных инструментов: тени блоков, градиенты, border-radius, flexbox, grid, анимации, clip-path и фильтры — с предпросмотром в реальном времени при настройке каждого значения.
⬛
Генератор CSS box-shadow
Создавайте box-shadow визуально с живым предпросмотром и копируйте CSS.
⬭Генератор CSS border-radius
Настройте радиус каждого угла с живым предпросмотром и скопируйте CSS.
▤Генератор CSS-градиентов
Создайте линейный или радиальный градиент с живым предпросмотром и скопируйте CSS.
TГенератор CSS text-shadow
Создавайте text-shadow с живым предпросмотром и копируйте CSS.
▲Генератор CSS-треугольников
Создайте треугольник на чистом CSS в любом направлении и скопируйте CSS.
⬓Песочница CSS Flexbox
Экспериментируйте со свойствами flexbox в живом предпросмотре и копируйте сгенерированный CSS.
▦Генератор CSS Grid
Создайте макет CSS grid с настраиваемыми столбцами, строками и отступом, с живым предпросмотром.
⤢Генератор CSS Transform
Соберите translate, rotate, scale и skew в единый CSS transform с живым предпросмотром.
⌒Генератор CSS-кривых сглаживания
Выберите или постройте сглаживание cubic-bezier и воспроизведите его на анимированной точке предпросмотра.
▢Генератор Glassmorphism
Создайте CSS для карточки в стиле матового стекла с размытием, прозрачностью, насыщенностью и цветом оттенка.
◇Генератор CSS clip-path
Обрежьте элемент в распространённые фигуры и скопируйте CSS clip-path.
☼Генератор CSS-фильтров
Создавайте CSS-фильтры ползунками с живым превью, затем копируйте.
⤿Генератор CSS-анимаций
Создайте анимацию по ключевым кадрам, смотрите превью и копируйте CSS.
◜Генератор CSS-спиннеров
Создайте чистый CSS-спиннер загрузки и скопируйте CSS.
▩CSS-узор для фона
Создайте CSS-узор фона из двух цветов и скопируйте его.
◳Генератор неоморфизма
Создавайте мягкие неоморфные тени с живым превью и копируйте.
@Конструктор CSS медиа-запросов
Создайте адаптивный @media-запрос с пресетами и скопируйте его.
▌Стилизатор полосы прокрутки CSS
Оформите пользовательскую полосу прокрутки и скопируйте CSS ::-webkit-scrollbar.
▭Блок соотношения сторон CSS
Создайте адаптивный блок соотношения сторон с запасным вариантом на padding.
‖Многоколоночная вёрстка CSS
Создайте многоколоночную текстовую вёрстку CSS с разделительной линией.
T○Обводка текста CSS
Добавьте контур или обводку к тексту и скопируйте CSS.