CSS 渐变生成器

🌈 CSS Gradient Generator

90°

🎨 预设渐变

📚 深度解析:CSS 渐变生成器

💡 常见使用场景

  • 生成线性/径向渐变背景
  • 调品牌渐变、按钮高光
  • 做渐变文字(background-clip:text)
线性渐变
linear-gradient(135deg, #ff7e5f, #feb47b) 表示从左上到右下的橙粉渐变;角度 0deg 朝上、90deg 朝右。可加多个停靠点控制色彩分布。
径向渐变
radial-gradient(circle at 30% 30%, #fff, #ddd) 以左上 30% 为圆心的同心圆渐变,适合做高光球或光晕。
渐变文字
background: linear-gradient(...); -webkit-background-clip: text; color: transparent; 把渐变裁到文字形状,得到彩色字。

❓ 常见问题(FAQ)

角度怎么定方向?
linear-gradient 的角度指渐变线方向,0deg 从下往上、90deg 从左往右、135deg 左上到右下。也可直接用 to right / to bottom 等关键字。
为什么渐变文字有时不显示?
需同时设 -webkit-background-clip: text 与 color: transparent,且背景为渐变;部分旧浏览器仅支持带 -webkit- 前缀。
⚠️ 使用说明与注意事项
📖关于「CSS 渐变生成器」

📝工具简介

CSS Gradient Generator is available directly in your browser, with no data uploaded.

功能特点

🎯使用场景

💬常见问题

这个工具是免费的吗?
完全免费,无需注册,直接在浏览器中使用。
生成的代码可以直接用吗?
可以,生成的 CSS 代码符合标准,可直接复制到项目中使用。
支持自定义参数吗?
支持,提供多种参数调节选项,满足个性化设计需求。