渐变色又一次大规模流行起来,背景、按钮、首页大图,颜色从一种平滑过渡到另一种。做得好的时候显得毫不费力,做不好就显得很廉价。差别通常就在两件事上:选的渐变类型,以及两端过渡的颜色。 线性 渐变沿一条直线过渡,从上到下、从左到右,或者任意角度,是背景和按钮最常用的类型。 径向 渐变从一个点向外呈圆形扩散,适合做聚光灯效果、光晕,或者给一个表面加一个微妙的中心焦点。大多数设计用线性渐变,想要一个视觉焦点时就用径向。 这里有个常见的坑。在两种鲜艳但对立的颜色之间过渡,比如蓝色和橙色,中间点很可能变成一种沉闷的灰褐色,因为过渡会经过一段饱和度很低的中间地带。解决办法是让两种颜色在色轮上离得近一点,或者在中间加一个第三种颜色,把过渡引导向好看的颜色,而不是一片浑浊。 打开 Filuni 的 CSS 渐变生成工具 ,选好颜色和方向,实时预览效果,然后直接复制生成好的 CSS 代码, linear-gradient(...) 或者 radial-gradient(...) ,粘贴进你的样式表就能用。 小提示: 低调的渐变比夸张的渐变更耐看。同一色系的两种深浅过渡,或者向相邻颜色轻微过渡,看起来精致;而一个按钮上塞进整条彩虹,看起来就像个廉价的演示样板。克制往往才是设计感的体现。 整个过程都在你的设备上完成,不需要注册账号。打开 渐变生成工具 ,不用手动跟语法较劲就能拿到干净的渐变代码。 线性渐变和径向渐变有什么区别? 线性渐变沿一条直线以任意角度过渡;径向渐变从一个点向外呈圆形扩散。线性适合背景和按钮,径向适合光晕和视觉焦点。

在两种鲜艳且对立的颜色之间过渡,会经过一段饱和度较低的中间地带。让颜色在色轮上离得近一点,或者加一个第三种颜色来引导过渡即可。 能不能直接复制 CSS 代码? 可以。生成工具会给出现成的 linear-gradient 或 radial-gradient 代码,直接粘贴进你的样式表即可使用。 不止两种,你可以沿着过渡添加多个颜色停靠点。加一个中间停靠点也正是修复两色渐变发浑问题的办法。 不会。渐变是在你的浏览器里生成的,不会有任何内容离开你的设备。 试试 Filuni 的免费工具 探索 Filuni 的全部 128+ 款工具。免费、无需注册、浏览器直接用。