首页
Tom Utilities

CSS 渐变生成器

开发者实用工具

设计线性或径向 CSS 渐变，实时预览并复制现成 CSS。

使用方法

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

  1. Choose linear or radial.
  2. Set the angle and two colors.
  3. Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

常见问题

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

相关工具

调色板生成器 从任意颜色生成浅色调、深色调、类似色、互补色和三角配色。 CSS 盒子阴影生成器 使用偏移、模糊、扩散和颜色滑块制作盒子阴影，然后复制 CSS。 颜色转换器 在 HEX、RGB 和 HSL 之间转换颜色，并提供实时预览色块。 UUID / GUID 生成器 生成随机的版本 4 UUID，可逐个或批量复制。 哈希生成器 计算任意文本的 MD5、SHA-1、SHA-256 和 SHA-512 摘要。 时间戳转换 在 Unix 时间戳、ISO 8601 和可读本地日期之间转换。