CSS 渐变生成器

可视化生成 CSS 线性/径向渐变代码

CSS 渐变生成器是一款免费在线开发者工具。可视化生成 CSS 线性/径向渐变代码常见相关词：css · gradient · 渐变 · linear · radial · 背景。本页可直接使用，不必注册。

%
%
%
background: linear-gradient(90deg, #4fb8b2 0%, #7c3aed 50%, #ec4899 100%);
使用帮助

使用说明

  1. 选择渐变类型：线性（linear）或径向（radial）
  2. 拖动色标添加、调整颜色与位置
  3. 设置角度/方向，实时预览效果
  4. 一键复制生成的 CSS 代码

常见问题

  • 数据处理安全吗？ 全程浏览器本地处理，不联网
  • 支持多色渐变吗？ 支持任意数量色标
  • 兼容旧浏览器？ 生成的是标准 CSS，兼容性请参考 caniuse

更多开发者工具

查看全部

JSON 格式化

JSON 格式化、压缩、校验、转 Go struct / TS interface

JSON 字段搜索

在 JSON 中按字段名/值/路径搜索，高亮匹配，支持 jq 表达式

时间戳转换

Unix 时间戳与日期互转，支持秒和毫秒

Cron 表达式

Cron 表达式生成与解析，下一次执行时间预览

UUID 生成器

生成 UUID v4 / v7 / ULID / NanoID

Hash 计算

计算文本或文件的 MD5 / SHA1 / SHA256 / SHA512

JWT 解析

解析 JWT 的 Header 和 Payload，查看过期时间

URL 编解码

URL / URI 组件的编码与解码

关于 CSS 渐变生成器 的常见问题

CSS 渐变生成器能做什么？

CSS 渐变生成器属于开发者工具。可视化生成 CSS 线性/径向渐变代码你可以直接在本页完成操作。

谁适合使用CSS 渐变生成器？

需要处理与css · gradient · 渐变 · linear · radial · 背景相关任务、又不想安装桌面软件的用户，可以把CSS 渐变生成器当作即开即用的网页工具。

使用CSS 渐变生成器安全吗？数据会上传吗？

该工具在浏览器本地运行。我们不会因为你使用CSS 渐变生成器而收集你输入的内容。

还有哪些同类工具？

本页底部列出了同属开发者工具的相关工具，方便对比选择。