什么是网格渐变生成器?
为网站背景、社交媒体图形和 UI 设计生成多色网格渐变。选择颜色、调整控制点位置,获得超越简单线性或径向渐变的有机效果。
使用方法
- 点击色块或输入十六进制色值来选择基础颜色,最多可添加 6 个颜色控制点。
- 在画布上拖动控制点来改变渐变的流向。
- 复制 CSS 代码或将渐变下载为 PNG。
结果
一位 UI 设计师用 4 个控制点创建了从紫色到青色的网格渐变,用于着陆页的首屏区域,然后复制 CSS 代码直接粘贴到样式表中。
为网站背景、社交媒体图形和 UI 设计生成多色网格渐变。选择颜色、调整控制点位置,获得超越简单线性或径向渐变的有机效果。
一位 UI 设计师用 4 个控制点创建了从紫色到青色的网格渐变,用于着陆页的首屏区域,然后复制 CSS 代码直接粘贴到样式表中。
创建精美的网格渐变背景
background-color: #f97316;
background-image:
radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);