浏览渐变集合
滚动浏览渐变样本网格，探索不同的颜色组合和样式。每个渐变都会显示其名称和颜色代码。
查看单个颜色
点击渐变的左半部分查看起始色，或点击右半部分查看结束色。HEX代码将显示2秒。
复制渐变CSS
点击任意渐变下方的“点击复制渐变”按钮，即可将完整的CSS背景属性复制到剪贴板。
在您的项目中使用
将复制的CSS代码粘贴到您的样式表或内联样式中。渐变以linear-gradient格式即可使用。
100+ 精选渐变
访问超过100种精美渐变组合的精选集合，按样式和颜色主题组织，方便浏览。
交互式颜色预览
点击任意渐变样本的左半部分或右半部分，可查看起始色和结束色及其显示的HEX代码。
一键复制CSS代码
点击复制按钮，即可一键将可用的CSS线性渐变代码即时复制到剪贴板。
可视化渐变网格
在简洁、现代的网格布局中浏览渐变，渐变名称和颜色代码清晰显示，方便快速参考。
色彩渐变是两种或多种颜色之间平滑的过渡，创造出视觉上吸引人的混合效果。在网页设计中，CSS线性渐变允许您创建这些按指定方向流动的颜色过渡。我们的库包含专业精选的渐变组合，它们彼此协调，为您节省了为背景、按钮、卡片和其他设计元素寻找和谐颜色过渡的时间。
专业精选
我们集合中的每个渐变都经过精心挑选，兼具视觉吸引力和设计多功能性，确保高质量的颜色组合。
即用型CSS
获取开箱即用的即时CSS代码。无需手动编写渐变语法或试验颜色值。
交互式颜色查看
通过点击样本的不同部分查看单个渐变颜色，轻松了解所使用的确切颜色。
省时设计工具
无需从头创建渐变，省去反复试验的麻烦。快速找到完美的渐变，并立即在您的项目中实施。
该库包含100多种精心策划的渐变组合，涵盖从微妙过渡到大胆、活泼混合的各种风格，适用于不同的设计需求。
点击渐变样本的左半部分查看起始颜色，或点击右半部分查看结束颜色。HEX代码将在样本上显示2秒。
该工具复制了一个完整的CSS背景属性，其中包含一个从左到右（to right方向）的线性渐变。例如：background: linear-gradient(to right, #FF6B6B, #4ECDC4);
是的，库中的所有渐变都可免费用于个人和商业项目，没有任何限制。色彩渐变不能受版权保护。
复制CSS代码后，将其粘贴到您的样式表或作为内联样式。您可以将其应用于任何元素的背景，例如div、section、按钮或卡片。
是的，复制CSS后，您可以通过将‘to right’部分修改为其他值（如‘to bottom’、‘to top’、‘45deg’或任何您喜欢的角度）来更改方向。