Перейти к содержимому
BB Toolsонлайн-инструменты

CSS и цвета

Генераторы градиентов, теней и скруглений, работа с палитрами и проверка контраста.

новое

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

Линейные градиенты с предпросмотром.

новое

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

CSS-тени с живым предпросмотром.

новое

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

Скругление углов с предпросмотром.

новое

Проверка контраста

Контраст цветов по стандарту WCAG.

новое

Генератор палитры

Оттенки и тона из базового цвета.

новое

Генератор favicon

Иконки сайта всех размеров из картинки.

Генератор Flexbox

Раскладка flex с предпросмотром.

Генератор CSS Grid

Сетка grid с предпросмотром.

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

Готовые @keyframes-анимации.

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

Размытие, яркость, контраст и другое.

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

Фигурная обрезка элементов.

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

Тень для текста с предпросмотром.

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

Треугольник на чистом CSS.

Редактор cubic-bezier

Кривая плавности анимации.

новое

Генератор Glassmorphism

CSS «матового стекла» с живым превью.

новое

Генератор SVG-блобов

Случайные органичные фигуры в SVG.

CSS и работа с цветом

Визуальные генераторы CSS: градиенты, тени (box-shadow, text-shadow), скругления, Flexbox и Grid, анимации, фильтры, clip-path, треугольники, кривые cubic-bezier, эффект матового стекла. А также конвертер цветов, палитры и проверка контраста.

Меньше рутины в вёрстке

Подберите эффект визуально и скопируйте готовый CSS — не нужно держать в голове синтаксис свойств и подбирать значения вслепую. Проверка контраста помогает соответствовать стандарту доступности WCAG.

Частые вопросы

Готовый код можно сразу вставить в проект?

Да, инструменты выдают валидный CSS, который копируется одной кнопкой и вставляется в стили.

Зачем проверять контраст?

Низкий контраст текста и фона ухудшает читаемость и не проходит требования доступности (WCAG). Проверка помогает подобрать безопасные цвета.