🌈 CSS 渐变生成器 — 可视化渐变构建工具
Create linear, radial, and conic CSS gradients visually. Multi-stop color picker, angle control, live preview. Copy CSS or Tailwind code free.
Design your perfect CSS gradient without writing a single line of code. Add color stops, drag them to reposition, pick linear/radial/conic type, adjust the angle — and copy the ready-to-use CSS or Tailwind classes instantly.
Color Stops
How to Use
1
Choose gradient type
Select Linear, Radial, or Conic from the type selector, then set the angle or position.
2
Add color stops
Click each stop to pick a color. Add more stops with the + button or drag to reposition them.
3
Copy the CSS
The live preview updates instantly. Click Copy CSS to get the ready-to-use background declaration.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient creates smooth transitions between two or more colors without using an image. Gradients are defined with background-image (or background shorthand) using linear-gradient(), radial-gradient(), or conic-gradient() functions.
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line at any angle. Radial gradients spread outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point like a color wheel or pie chart.
How do I add multiple color stops?
Click "Add Stop" to insert additional color stops between existing ones. Each stop has a color and a position (0–100%). You can drag stops to reposition them or click the × to remove them.
How do I use a gradient in CSS?
Copy the generated CSS and use it as: background: linear-gradient(45deg, #ff6b6b, #4ecdc4); or apply it to background-image. Gradients can also be applied to borders, masks, and text with additional CSS techniques.
What is the Tailwind output for gradients?
Tailwind v3 supports gradients with from-{color}, via-{color}, to-{color} utility classes combined with bg-gradient-to-{direction}. For custom colors outside the palette, use the arbitrary value syntax: from-[#ff6b6b].
完整指南：CSS渐变生成器
什么是CSS渐变？
CSS渐变无需图片即可创建颜色间的平滑过渡。类型：linear-gradient()、radial-gradient()、conic-gradient()及其重复变体。可完美缩放，可用自定义属性实现动画。
如何使用
- 选择渐变类型：线性、径向或圆锥形。
- 在渐变条上添加色标。
- 调整角度。
- 复制CSS。
专业技巧
- 使用现代CSS中的
oklch色彩空间，避免过渡中出现"脏灰色"。 - 用逗号分隔的多个渐变叠加可创建层次效果。
- 渐变可通过自定义属性的CSS transitions实现动画。