Задайте каждый угол в пикселях для карточек, вкладок и «таблеток» (999px даёт идеальную капсулу) или переключитесь в режим восьми значений и тяните четыре маркера, чтобы вылепить органичную форму вроде 63% 37% 54% 46% / 55% 48% 52% 45%. Есть пресеты «таблетка», «вкладка», «лист» и «яйцо».
Как пользоваться
- Выберите генератор в верхнем ряду: градиент, тень блока, скругление, стекло, тень текста, clip-path, easing, flexbox или grid.
- Двигайте ползунки или перетаскивайте прямо в предпросмотре: точки цвета на полосе градиента, точки clip-path, маркеры кривой Безье, четыре маркера border-radius.
- Можно начать с пресета под кодом.
- Нажмите на код, чтобы скопировать. Последние настройки каждого генератора сохраняются.
- Щелчок по пустому месту полосы градиента добавляет точку с цветом в этом месте.
- В режиме border-radius из 8 значений четыре маркера двигают пары значений, как в инструментах «fancy border radius».
- Для backdrop-filter в Safari нужен префикс -webkit-; код стекла содержит оба варианта.
- Flexbox и grid: нажмите на пронумерованный блок в предпросмотре, чтобы задать ему свои grow, order или span.
Зачем собирать CSS визуально
У свойств вроде box-shadow, clip-path и cubic-bezier по нескольку чисел, и их эффект трудно представить. box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25) читается как сдвиг по x, сдвиг по y, размытие, растяжение и цвет; cubic-bezier(0.34, 1.56, 0.64, 1) проскакивает цель, потому что второе значение y больше 1. Тянуть форму и смотреть на результат быстрее, чем править числа и перезагружать страницу.
На выходе — чистый CSS, который работает во всех современных браузерах без фреймворков, так что его можно сразу вставить в таблицу стилей, объект CSS-in-JS или файл дизайн-токенов.
Полезные опорные значения
Углы градиентов отсчитываются сверху по часовой стрелке: 0deg — вверх, 90deg — вправо, 180deg — вниз. Ключевые слова плавности соответствуют ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) и ease-in-out = (0.42, 0, 0.58, 1); значения x должны быть от 0 до 1. border-radius принимает до восьми значений: горизонтальные радиусы, затем после косой черты вертикальные — так получаются «кляксы» вроде 30% 70% 70% 30% / 30% 30% 70% 70%.
Советы для красивого результата
Реалистичная тень получается из нескольких мягких слоёв, а не одного тёмного, а тень с оттенком цвета фона выглядит чище чистого чёрного. Чтобы эффект стекла оставался читаемым, проверяйте контраст текста над самой пёстрой частью фона. Для раскладки flexbox подходит к одномерным строкам или столбцам, а grid — к строкам и столбцам сразу; нажмите на блок в превью, чтобы задать ему свой grow, order или span.
Частые вопросы
Работают ли эти CSS-эффекты во всех браузерах?
Градиенты, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, flexbox и grid работают во всех современных браузерах. Для backdrop-filter в эффекте стекла старым версиям Safari нужен префикс -webkit-, поэтому в коде есть оба варианта.
Как сделать мягкую реалистичную тень?
Сложите два-три слоя с нарастающим размытием и сдвигом и низкой непрозрачностью, например 0 1px 2px при 8 %, 0 4px 8px при 8 % и 0 16px 32px при 8 %. Многослойные пресеты — хорошая отправная точка.
Чем отличаются линейный, радиальный и конический градиенты?
Линейный меняет цвет вдоль прямой, радиальный расходится от центра кругом или эллипсом, а конический поворачивает цвета вокруг центра, как стрелка часов, — это удобно для круговых диаграмм и цветовых кругов.
Как сделать органичную форму через border-radius?
Используйте синтаксис из восьми значений с косой чертой, например 30% 70% 70% 30% / 30% 30% 70% 70%. Потяните четыре маркера в превью, чтобы придать форму, и скопируйте результат.
Можно ли анимировать формы clip-path?
Да, между многоугольниками с одинаковым числом точек. Сохраняйте число точек, добавьте transition для clip-path и меняйте многоугольник при наведении или через класс.
Можно ли свободно использовать сгенерированный код?
Да. Это обычный CSS, созданный по вашим настройкам, без лицензии и обязательного указания авторства.