返回首页
线性 / 径向渐变可视化调参 · 一键复制代码

CSS 渐变用法说明

渐变背景由 linear-gradient()(线性,沿角度方向过渡)或 radial-gradient()(径向,从中心向外扩散)函数生成,可直接用于 backgroundbackground-image 属性,也能用于 border、文字遮罩等高级场景。多色渐变通过"颜色 位置%"节点控制,两色直接过渡、三色以上形成层次。

技巧:渐变方向 135deg(左上→右下)最符合视觉习惯;同类色(深浅蓝)显专业,互补色(蓝→橙)显活力;渐变 + 透明度叠加在图片上可制作Banner遮罩。

常见问题

渐变在手机上显示有色带(条纹)怎么办?
8位色深屏幕上大跨度渐变容易出现 banding,可在渐变上叠加细微噪点(background 叠加 SVG feTurbulence 或半透明噪点图)缓解。
需要兼容旧浏览器吗?
现代浏览器全部支持标准语法;IE10 以下需要 -webkit- 前缀,目前国内市场基本无需兼容。
渐变可以做动画吗?
background 渐变本身不能直接 transition,可通过 background-position 移动超大渐变背景、或用 @keyframes 改变 CSS 变量实现动画。