Генератор CSS
- Файлы не покидают устройство
- Работает в браузере
- Бесплатно, без регистрации и водяных знаков
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Как пользоваться: Генератор CSS
Генерируйте CSS визуально с живым предпросмотром: тень блока, clip-path, плавность cubic-bezier, стекломорфизм, радиус блоба и тень текста. Каждый генератор даёт обычный CSS и класс Tailwind с произвольным значением, готовые к копированию.
- 1
Выберите генератор: тень блока, clip-path, cubic-bezier, стекломорфизм, радиус блоба или тень текста.
- 2
Начните с пресета или настройте ползунки и цвета.
- 3
Где предложено, перетаскивайте прямо на предпросмотре: точки clip-path, две ручки Безье или ручки блоба.
- 4
Скопируйте CSS или класс Tailwind из вывода ниже.
Частые вопросы
Можно ли сложить несколько теней?
Да. В «Тени блока» нажмите «Добавить слой», чтобы совместить слои, у каждого свой сдвиг, размытие, растяжение, цвет, непрозрачность и inset.
Как добавить или убрать точки clip-path?
Дважды щёлкните край фигуры, чтобы добавить точку; выберите точку и нажмите Delete, чтобы убрать. Круг, эллипс и inset используют ползунки.
Почему я не вижу эффект стекла?
backdrop-filter размывает только то, что за элементом, поэтому нужен цветной или насыщенный фон. Вывод включает префикс -webkit- для Safari.
Что делают значения Безье вне 0–1?
Значения Y выше 1 или ниже 0 заставляют движение проскакивать, что даёт эффект отскока или предвкушения. Нажмите «Играть», чтобы сравнить с линейным движением.
Нужен ли вывод Tailwind плагин?
Нет. Он использует синтаксис произвольных значений Tailwind, например rounded-[…] или [clip-path:…], который работает в обычном Tailwind.