Цвет и дизайн
Генератор градиентов
Бесплатный генератор CSS-градиентов. Визуально создавайте линейные, радиальные и конические градиенты. Мгновенно копируйте CSS или классы Tailwind. Предварительный просмотр в реальном времени по мере настройки.
Runs in your browser
Gradient generator
CSS
background: linear-gradient(135deg, #3b82f6, #a855f7);css
Tailwind (approx)
bg-gradient-to-br from-[#3b82f6] to-[#a855f7]css
Примечание редактора
Understanding · Two colours and a path between them.
Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.
Часто задаваемые вопросы
Quick answers.
›What gradient types are supported?
Linear, radial and conic — all three CSS gradient types.
›Can I add color stops?
Yes — add as many color stops as you need with custom positions for fine-grained control.
›Does it output Tailwind?
Yes — toggle to get Tailwind utility classes (e.g. bg-gradient-to-r from-blue-500 to-purple-600).
›Is the generator free?
Yes — fully free, no signup, runs in your browser.
Люди также ищут
Use with
What people reach for next.
Связанные инструменты
More in this room.
- Генератор Box ShadowВизуальный редактор CSS box-shadow.
- Генератор Border RadiusРедактор индивидуального border-radius CSS.
- Редактор Cubic BezierВизуально создавайте кривые сглаживания CSS.
- Генератор CSS-анимацийСоздавайте ключевые кадры визуально, копируйте готовый CSS.
- Генератор CSS-фильтровПредварительный просмотр размытия, яркости, поворота оттенка и многого другого.
- Генератор глассмортизмаUI-карточки с эффектом матового стекла и backdrop-filter.