渐变方向
度
颜色节点
%
%
预设渐变
CSS代码
.element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}Tailwind CSS
<!-- Tailwind 配置 -->
// tailwind.config.js
theme: {
extend: {
backgroundImage: {
'custom-gradient': 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
}
}
}
<!-- 使用 -->
<div class="bg-custom-gradient" />使用方式
CSS: 直接应用到元素的 background 属性
Tailwind: 在 tailwind.config.js 中配置自定义渐变
使用说明
- 线性渐变: 沿直线方向的颜色过渡
- 径向渐变: 从中心向外扩散的颜色过渡
- 锥形渐变: 围绕中心点旋转的颜色过渡
- 点击预设快速应用流行的渐变配色