My Pocket Tools

CSS 渐变生成器

通过实时预览和可复制粘贴的代码创建惊艳的 CSS 渐变

渐变类型
实时预览
色标
颜色 1
0%
颜色 2
100%

拖动颜色或调整位置以创建您理想的渐变

生成的 CSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
.gradient { background: linear-gradient(to right, #667eea 0%, #764ba2 100%); }
预设渐变

什么是 CSS 渐变？

CSS 渐变是两种或多种颜色之间的平滑过渡。它们可用作背景、叠加层或装饰元素。我们的渐变生成器让您可以通过可视化编辑器轻松创建线性和径向渐变。只需选择颜色、调整位置，然后将生成的 CSS 代码直接复制到您的样式表中。

CSS 渐变的类型

  • 线性渐变: 沿任意方向（水平、垂直或对角）的直线创建渐变
  • 径向渐变: 从中心点以圆形或椭圆形向外辐射创建渐变

使用方法

  1. 在线性或径向渐变类型之间选择
  2. 选择方向（线性）或形状（径向）
  3. 添加、移除或调整色标
  4. 微调每种颜色沿渐变的位置
  5. 复制生成的 CSS 代码并粘贴到您的样式表中

主要功能

  • 实时预览：编辑时实时查看您的渐变
  • 多个色标：在单个渐变中最多添加 10 种颜色
  • 预设渐变：从精美的预制渐变组合开始
  • 随机颜色：生成随机颜色组合以获取灵感
  • 复制 CSS 代码：一键复制生成的渐变代码
  • 线性与径向兼具：支持所有 CSS 渐变类型

相关工具