🛠️

🌈CSS 渐变生成器

可视化创建线性与径向 CSS 渐变，支持多色标，并一键复制 CSS 代码。

CSS 渐变生成器

可视化构建线性与径向渐变

拖动以重新排序

⠿
位置0%
⠿
位置100%
background: linear-gradient(90deg, #3b82f6 0%, #ec4899 100%);

关于 CSS 渐变生成器

通过直观的可视化界面设计精美的 CSS 渐变。可在线性渐变和径向渐变之间选择，添加并定位多个色标，并即时复制跨浏览器兼容的 CSS 代码。非常适合想要为项目添加丰富背景的网页设计师和开发者。

主要特性

  • 可视化线性与径向渐变编辑器
  • 支持多个色标并可调整位置
  • 实时生成 CSS 代码
  • 一键复制生成的 CSS

常见问题

什么是 CSS 渐变？
CSS 渐变是浏览器通过 linear-gradient() 或 radial-gradient() 函数渲染的两种或多种颜色之间的平滑过渡，可省去渐变图片文件。
如何使用径向渐变？
在 CSS 中使用 radial-gradient() 函数，例如：background: radial-gradient(circle, red, yellow);。本工具可让您可视化配置形状、大小和色标，并自动生成代码。