CSS Gradient Generator
Create CSS gradients
Create CSS gradients 在您的浏览器中本地运行
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
CSS 渐变生成器从两种颜色和一个角度构建真正的线性或径向渐变，显示其完整尺寸，并向您提供 CSS。角度是人们误读的部分：在CSS中，0deg指向上方，方向顺时针旋转，所以90deg从左到右，180deg从上到下。犯了这个错误就是为什么渐变第一次看起来常常是颠倒的。两种颜色都可以带有八位 alpha 值，这就是在英雄图像上淡出渐变的方法。
Where people use the
- 建立一个在两种品牌颜色之间渐变的英雄背景。
- 在代码中提交之前测试哪个角度看起来正确。
- 为卡片或按钮产生微妙的垂直渐变。
- 创建使照片变暗的半透明叠加层。
How to use the
- 1
选择开始和结束颜色
使用颜色选择器或输入十六进制值。预览和 CSS 会随着您的更改而更新。
- 2
选择线性或径向
线性以选定的角度穿过盒子。径向从中心向外扩展为一个圆。
- 3
设置角度
将滑块从 0 度拖动到 360 度。记住向上 0 度，向右 90 度，向下 180 度，向左 270 度。
- 4
复制 CSS
该规则是一个背景声明，您可以直接粘贴到样式表中，或者如果您愿意，也可以粘贴到背景图像属性中。
提示和最佳实践
- 对于带有文本的背景，希望亮度差异较小；它读起来像是一种质感，而不是一种干扰。
- 对于渐变文本，请检查最亮点和最暗点的对比度，而不仅仅是平均值。
- 将梯度保持在两到三级；更多的看起来很泥泞。
常见问题
角度指向哪个方向？
0 度指向元素的顶部，角度顺时针增加。所以 90 度向右，180 度向下。如果您习惯于从右侧逆时针测量角度的数学角度，这是违反直觉的。
为什么我的渐变看起来呈带状？
因为亮度接近的两种颜色会在 8 位显示器上产生可见的阶梯，尤其是在大面积上。添加微妙的第三个光圈，或使用稍宽的亮度范围，通常会隐藏它。
我可以使用透明度吗？
是的。使用八位十六进制值，例如 667eea00 表示完全透明，或 667eea80 表示半透明，渐变将在其后面的任何内容上淡出。
到处都支持渐变吗？
当前每个浏览器都支持线性和径向渐变，无需前缀。只有非常旧版本的 Safari 和 Android 才需要供应商前缀，这实际上意味着 2015 年之后不再构建任何内容。
为什么我的渐变不显示？
因为元素没有高度。渐变被绘制到元素的框中，因此空的 div 会折叠到零高度并且不显示任何内容。设置高度或添加内容。
它会生成两个以上的色标吗？
不，这个工具可以处理两个。对于多停止渐变，采用它生成的 CSS 并手动添加停止；语法只是更多用逗号分隔的颜色和百分比对。