🧰Locly

CSS 渐变生成器

创建线性、径向与圆锥 CSS 渐变

预览

工具简介

CSS 渐变生成器支持线性/径向/圆锥、最多 5 个色标、实时预览，并复制带纯色兜底的 CSS。全程在浏览器本地处理，无需上传。

使用方法

  1. 选择线性、径向或圆锥
  2. 调整角度与色标
  3. 预览渐变
  4. 复制带兜底的 CSS
  5. 继续微调后再复制

常见使用场景

  • UI：做英雄区与按钮背景
  • 设计系统：探索渐变 token
  • 教学：对比三种渐变
  • 原型：把 CSS 贴进样式表
  • 移动端：无需桌面 IDE 即可调节

常见问题（FAQ）

Q1: 支持哪些渐变？

线性、径向与圆锥渐变，最多 5 个色标。

Q2: 为什么先有一行纯色 background？

复制的 CSS 先写纯色兜底，再写 background-image 渐变。

Q3: 手机上能预览吗？

可以。调整色标、角度与类型时预览会实时更新。

Q4: 数据会上传吗？

不会。全程在浏览器本地运行，不会上传。

Q5: 最多几个色标？

2 到 5 个，便于快速出图。

相关工具

CSS 阴影生成颜色转换图片调色板