渐变色彩调和站
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
为什么会用渐变背景是现代 UI 设计的必修课？
单一纯色背景给人沉闷、廉价的感觉，而渐变则能在视觉上立刻赋予设计以层次感、深度感与高级质感。从 Apple、Stripe 到各大 SaaS 产品的官网，无不将精心设计的渐变作为品牌视觉的核心要素。然而手写 CSS 渐变代码极其繁琐——`linear-gradient(135deg, #667eea 0%, #764ba2 100%)` 这类字符串往往需要多次尝试才能确定角度和色彩节点的具体位置。这款生成器让您直接通过颜色选取器和角度滑块进行交互，实时预览效果，找到满意的渐变后一键复制代码，大大缩短了设计迭代周期。
3 Gradient Types
Linear, radial, and conic gradients all supported with full type-specific controls
Multi-Stop Gradients
Add unlimited color stops and drag their positions to create complex multi-color gradients
Live Preview
See your gradient rendered in real-time as you adjust colors, positions, and the angle
三步制作出赏心悦目的渐变背景
选择渐变类型与方向
选择线性渐变（适合横向流动感）或径向渐变（适合聚焦感），并通过角度滑块或方向关键字确认渐变流向。
添加并调整颜色节点
至少配置两个颜色节点（起始色和终止色）。可以为渐变添加更多中间节点，并拖动它们在渐变条上的位置来精细控制过渡比例。
复制代码应用到项目
在预览区满意后，点击「复制 CSS」将生成的代码直接粘贴进您的样式表，即刻生效。
令人惊艳的渐变设计最适合用在哪里？
高级感渐变主要行动按钮 (CTA)
将主要的注册或购买按钮设置为从蓝色到紫色的渐变，相比单调的纯色按钮，能有效提升用户点击意愿。
首屏主视觉背景 (Hero Section)
渐变背景常用于网站首屏大横幅区域，赋予整个品牌页面高级且现代的视觉冲击力。
图片遮罩叠加层 (Overlay)
在图片之上盖一层从全透明到深色的渐变半透明蒙层，让文字叠加在图片上时既清晰可读又不失美观。
渐变色文字效果
配合 `background-clip: text` 属性，可以将渐变应用到文字本身，创造出极为抢眼的彩虹字或金属质感标题。
色彩搭配与渐变设计的高阶原则
✓ 用克制的渐变营造高级感
最高端的渐变设计往往不是色差最大的那个，而是最微妙的那个。尝试在相近色调之间做过渡（如深蓝到紫蓝），视觉上更为内敛沉稳，品质感更强。
✓ 确保渐变背景上的文字对比度充足
渐变背景的亮度在不同区域有所变化，务必检查文字在渐变的最浅色区域处仍然具备足够的对比度（WCAG AA 标准要求至少 4.5:1），确保无障碍可读性。
✓ 现代浏览器均已原生支持 CSS 渐变
CSS 渐变在所有主流浏览器（Chrome、Firefox、Safari、Edge）中均已无需前缀原生支持，您无需担心额外的兼容性问题。
✓ 结合调色板生成器选取和谐配色
如果您不确定哪两种颜色搭配在渐变中效果好，可以先使用我们的「色彩调色板生成器」挑选出和谐的配色方案，再将选定的颜色引入此渐变工具中配置。
❓ Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line at an angle. Radial gradients radiate outward from a center point in circles or ellipses. Conic gradients rotate around a center point like a pie chart — great for progress rings and color wheels.
How do I create a transparent gradient?
Use transparent as a color stop: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). This creates a gradient from a semi-opaque color to fully transparent — perfect for image overlays.
Why does my gradient look banded or striped?
Banding (visible stripes between colors) occurs on low-quality displays or when transitions span similar hues. Add a middle color stop at a complementary hue to smooth the transition.
Can I use gradients as borders?
Yes, use border-image: linear-gradient(...) 1. This sets the gradient as the border image. Alternatively, use a ::before pseudo-element with a gradient background and negative z-index to simulate a gradient border.