🌈CSS渐变生成
通过添加/调整颜色stop视觉化构建linear/radial渐变并获取CSS代码,预览实时反映。常用于网站背景、按钮设计、卡片UI头部、移动App渐变、营销页背景。
🔒 浏览器内处理✓ 无水印✓ 无需注册
使用方法
- 1设定类型(linear/radial)和角度。
- 2添加/调整颜色stop。
- 3复制结果CSS。
常见问题
复杂的conic-gradient可以吗?+
目前仅支持linear/radial。conic-gradient(圆形顺时针)需另行输入。
两色vs三色以上的区别?+
两色简洁干净,三色以上表现更丰富。但过多会显脏,建议3~4色以内。
什么角度好?+
135度(左上→右下)最自然且常见。90度(左→右)或180度(上→下)也清爽。
透明渐变也可以吗?+
调整每个色stop的alpha(rgba)即可。在文字上方加暗渐变叠层时有用。
深色模式渐变技巧?+
深色调(#1a1a2e → #16213e等)搭配好。避免过暗、略加饱和度,避免平面化。
旧版浏览器支持?+
现代浏览器均支持标准CSS gradient。需要IE等旧版可加-webkit-、-moz-等vendor prefix。