CSS Visual Generator
Генеруйте CSS-градієнти, тіні та border-radius візуально з живим попереднім переглядом.
Type
Angle: 135°
Color Stops
#6366f1
0%
#f59e0b
100%
Presets
CSS
background: linear-gradient(135deg, #6366f1 0%, #f59e0b 100%);
Про інструмент CSS Visual Generator
Генеруйте CSS-градієнти, тіні блоків і border-radius візуально. Живий попередній перегляд, 12+ пресетів градієнтів, 8 пресетів тіней, 14 пресетів border-radius, багатозупинкові градієнти, шаруваті тіні та копіювання CSS одним кліком.
Як використовувати
- 1Оберіть вкладку: Градієнт, Тінь блоку або Border Radius.
- 2Використовуйте повзунки та палітри для створення стилю — попередній перегляд оновлюється в реальному часі.
- 3Натисніть будь-яку кнопку пресету для миттєвого застосування підібраного стилю.
- 4Скопіюйте згенерований CSS із блоку коду внизу.
Часті запитання
Які типи градієнтів підтримуються?
Лінійні, радіальні та конічні градієнти — всі з кількома кольоровими зупинками та керуванням кутом.
Чи можна додати кілька шарів тіні?
Так. Натисніть «+ Додати шар», щоб нашарувати кілька шарів box-shadow, кожен із незалежним зміщенням, розмиттям, розповсюдженням, кольором, прозорістю та перемикачем inset.
Що таке «внутрішня» (Inset) тінь?
Внутрішня тінь відмальовується всередині елемента, а не ззовні — корисна для ефектів натиснутих кнопок, внутрішнього свічення та вирізаних форм.
Чи можна встановити border-radius для кожного кута окремо?
Так. Вимкніть режим «Зв'язано», щоб незалежно керувати всіма чотирма кутами: верхній лівий, верхній правий, нижній правий, нижній лівий.
Інформація
- Категорія
- image
- Використання
- Необмежено
Схожі інструменти
Більше інструментів: image
Crop Image
Обрізайте будь-яке зображення в редакторі перетягування. Пропорції, точні пікселі, миттєве збереження.
Resize Image
Швидко та легко змінюйте розміри зображень.
Convert Image
Конвертуйте зображення між форматами: JPEG, PNG, WebP тощо.
Compress Image
Зменшіть розмір файлу зображення зі збереженням якості.