设计

CSS 渐变生成器

可视化生成 CSS 渐变。

布局: CSS Flexbox 生成 · 深度: CSS 阴影生成器.

使用方法

选择预设或从头构建:添加颜色停止点、拖动位置、切换线性/径向/锥形。复制CSS或Tailwind类代码片段。

常见问题

支持哪些渐变类型?

线性(任意角度)、径向(从中心向外的圆形)和锥形(色轮)。每种都支持多个位置可拖动的色标。

如何使用 CSS?

将生成的 background 行复制到样式表,或粘贴到 Tailwind 任意值中,例如 bg-[linear-gradient(...)]。

能从预设开始吗?

可以——点击 12 种预设中的任意一种(日落、海洋、径向聚光、锥形彩虹等),再调整色标和角度。

最后更新: