Генератор CSS-эффектов
Крутите ползунки и сразу видите результат. Готовый CSS копируется одной кнопкой.
Как пользоваться
Четыре вкладки — четыре частые задачи. Скругления: можно задать все углы разом или каждый отдельно. Обрезка формы: готовые фигуры от круга до звезды. Кривая плавности: две точки задают характер анимации, кнопка «Проиграть» показывает движение. Стекло: размытие фона с полупрозрачной подложкой.
Смысл такого инструмента в том, чтобы не гадать по числам, а видеть. Особенно это касается кривой плавности: разница между значениями 0,25 и 0,4 на слух не описывается, но мгновенно видна в движении.
Частые вопросы
Эффект стекла работает во всех браузерах?
Свойство backdrop-filter поддерживают все современные браузеры, для Safari в код добавлен вариант с префиксом -webkit-. В старых браузерах фон просто не размоется, а полупрозрачная подложка останется — верстка не сломается.
Что означают четыре числа в кривой плавности?
Это координаты двух опорных точек, которые задают форму кривой разгона и торможения. Первое и третье число — по горизонтали, от 0 до 1. Второе и четвёртое — по вертикали, они могут выходить за границы, и тогда анимация слегка «перелетает» и возвращается.
Почему clip-path обрезает, а не скругляет?
Это разные свойства. border-radius скругляет углы прямоугольника, clip-path вырезает произвольную фигуру и отсекает всё за её пределами, включая фон и содержимое.
Код куда-то отправляется?
Нет, всё считается в браузере.