免费 CSS 生成器
带实时预览的可视化 CSS 代码生成器。调整设置并立即复制生产就绪的 CSS。
所有 CSS 生成器
CSS 渐变生成器，免费
通过可视化编辑器创建漂亮的 CSS 渐变。支持线性与径向渐变，可添加多个色标。一键复制 CSS 代码。免费，无需注册。
CSS box-shadow 生成器，免费
带实时预览的可视化 CSS box-shadow 生成器。可调整偏移、模糊、扩展、颜色和 inset 选项。一键复制 CSS。免费，无需注册。
CSS text-shadow 生成器，免费
使用可视化编辑器创建 CSS text-shadow 效果。调整偏移、模糊、颜色，并添加多层。一键复制 CSS。免费，无需注册。
CSS border-radius 生成器，免费
通过可视化编辑器设计自定义 CSS border-radius 值。可单独调节每个圆角并即时复制 CSS。免费，无需注册。
CSS clip-path 生成器，免费
免费的可视化 CSS clip-path 生成器。创建多边形、圆形、椭圆或 inset 剪裁路径，带实时预览和即时 CSS 代码。
CSS 玻璃拟态生成器，免费
创建 CSS 毛玻璃效果，支持实时预览。自定义模糊、透明度和边框。复制即可用于生产的 CSS。免费，无需注册。
CSS cubic-bezier 曲线生成器，免费
可视化生成 CSS cubic-bezier() 缓动函数。拖动控制点、预览动画并复制代码。免费，无需注册。
CSS 三角形生成器，免费
生成纯 CSS 三角形，可自定义方向、大小和颜色。实时预览并复制可直接用于生产的 CSS 代码。免费，无需注册。
CSS 加载器与转圈生成器，免费
生成漂亮的 CSS 转圈和加载动画。自定义颜色、大小和速度。复制纯 CSS 代码，零依赖。免费，无需注册。
CSS 图案生成器，免费
生成漂亮的 CSS 背景图案。可从条纹、圆点、棋盘、锯齿等样式中选择。可自定义颜色和大小。
PX → REM 转换器，免费
免费的在线 PX 转 REM 转换器。在像素与 rem 之间互相转换，可配置基础字号。附带方便的对照表。
CSS 压缩器，免费
免费在线 CSS 压缩器。通过移除注释和空白并优化值来压缩 CSS。即时查看节省的体积。在浏览器中处理。
CSS 动画生成器，免费
免费 CSS 动画生成器。可视化创建 @keyframes，带时长、时间函数、缓动和变换控制。复制可直接用于生产的 CSS。
CSS 盒模型可视化工具，免费
交互式 CSS 盒模型可视化工具。调整外边距、边框、内边距和内容尺寸，实时查看效果。
CSS 多栏生成器，免费
免费 CSS 多栏布局生成器。以实时预览创建报纸式分栏，并即时复制 CSS 代码。
CSS 滤镜生成器，免费
免费 CSS 滤镜生成器。调整亮度、对比度、模糊、饱和度、色相旋转、灰度、棕褐、反色与透明度，带实时预览。
CSS 文字描边生成器，免费
免费 CSS text-stroke 生成器。创建带描边、空心或线条效果的文字，带实时预览。可调节颜色、粗细和阴影。
CSS 渐变边框生成器，免费
免费的 CSS 渐变边框生成器。创建精美的渐变边框，支持实时预览，可调节圆角、宽度和颜色。立即复制 CSS。
CSS Flexbox 生成器，免费
免费的可视化 CSS Flexbox 生成器。配置 flex 容器及其项目，实时预览，一键复制生成的 CSS 代码。
CSS 渐变文字生成器，免费
免费的 CSS 渐变文字生成器。创建精美的渐变文字效果，支持实时预览，一键复制 CSS 代码。
CSS Grid 生成器，免费
免费可视化 CSS Grid 生成器。通过实时预览设置栏、行、间距与对齐方式，然后复制生成的 CSS 代码。
CSS 单位转换器，免费
在 CSS 单位之间互相转换：px、rem、em、vw、vh、vmin、vmax、pt、cm、mm、in、%。可设置根字号和视口尺寸以获得精确结果。
关于我们的 CSS 生成器
Absolutool 包含 12 款可视化 CSS 生成器，提供实时预览和可复制的代码。每个生成器都允许您通过滑块、拖动手柄或控件调整值，并立即看到结果 · 无需 CSS 知识。看到满意的效果后，一键复制代码。
我们的 CSS 工具涵盖最常被搜索的 CSS 属性：渐变（线性和径向）、盒阴影和文字阴影、圆角、剪切路径（多边形、圆形、椭圆）、毛玻璃效果、用于动画的三次贝塞尔曲线、纯 CSS 三角形、加载动画、背景图案和单位转换。无论是学习 CSS 的初学者，还是想要可视化调整样式的资深开发者，都完美适用。
为什么 CSS 可视化生成器很重要
手写 CSS 来处理像 linear-gradient(135deg, #667eea 0%, #764ba2 100%)、box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) 或 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) 这样的属性，要求你把语法烂熟于心，并在能看到之前就想象出视觉结果。可视化生成器把这个顺序颠倒过来：拖动一个滑块，挑选一种颜色，看着预览更新，然后复制生成的代码。这一分类中的工具产出符合标准的 CSS，它在过去五年里发布的每一个浏览器中都能工作，没有专有语法，不需要预处理器。
本网站上的每个生成器都是一个单独的 HTML 页面，带有一个实时预览窗格和一组控件。当你调整数值时，预览会使用生成器将要复制出来的真实 CSS 实时重新渲染。没有冒充 CSS 的专有渲染引擎；你看到的正是你的用户将会看到的。生成的代码使用现代语法（在合适处使用 CSS 自定义属性、用于 RTL 支持的逻辑属性、用于较新颜色工具的 OKLCH），但在你需要支持较旧浏览器时会优雅地回退：你可以为每个工具调低一个设置，切换到对旧版友好的变体。
浏览器支持与厂商前缀
CSS 规范自 2018 年以来一直非常稳定：渐变、变换、阴影、动画、flexbox、grid 和 clip-path 在每一个主流浏览器（Chrome、Firefox、Safari、Edge）中都无需前缀即可工作。少数仍需前缀的属性大多是实验性的（较旧 Safari 中的 CSS subgrid、滚动驱动的动画）。生成器默认输出无前缀的标准 CSS，你可以直接把它粘贴进样式表。backdrop-filter（用于毛玻璃拟态生成器）是最后一个常见的落后者，但它在稳定版 Firefox 103（2022 年 7 月）中到位，而 Safari 多年来一直通过 -webkit-backdrop-filter 支持它。对于这些工具所涵盖的属性，现代项目很少需要 autoprefixer。
如果你的目标是 Internet Explorer 11（一个正在消失但对某些企业内网而言真实存在的受众），这里的大多数属性都没有支持。grid 生成器会优雅地回退，因为 IE11 支持一种较旧的 grid 语法，对简单布局足够相似，但像 subgrid 或 gap 这样的高级功能不会渲染。对于现代受众，经验法则是“使用这些工具产出的标准语法，跳过前缀，并接受剩下那极小部分的 IE 受众会看到一个简化的布局”。caniuse.com 仍然是你对任何属性拿不准时的权威参考。
性能方面的考量
视觉效果可能很快变成性能陷阱。一个多层的 box-shadow 每帧绘制一次，这很便宜；而一个固定页眉上的 filter: blur(20px) 会在每个滚动事件上强制重绘，并在移动端拖垮帧率。Cubic Bezier 工具帮助你调出感觉对头的动画曲线；把它与动画元素上的 will-change: transform 搭配使用，会让浏览器准备好在 GPU 上合成动画，而不是重绘页面。一般规则是：对 transform 和 opacity 做动画；其他一切（宽度、高度、top、left、颜色）都会触发布局或绘制，在动画中应当谨慎使用。
毛玻璃拟态生成器是这里最重的视觉效果，因为 backdrop-filter: blur(20px) 会迫使浏览器在玻璃元素可见的每一帧捕获背景、模糊它并重新合成。在配有独立显卡的台式机上这是看不见的；在中端手机上它可能把帧率从 60 fps 降到 30 fps。CSS 图案生成器产出基于 SVG 的图案，其成本可以忽略不计。只要加载器和动画对 transform/opacity 做动画，它们就保持流畅。如果你的设计堆叠了三层或更多模糊层，请在发布前在中端手机上测试；“优雅”与“卡顿”之间的差别可能就是多出来的一层。
设计系统中的 CSS
现代设计系统把颜色、间距和高度表达为自定义属性（CSS 变量），然后在其上构建组件样式。这里的生成器输出可直接粘贴进组件的直接值，但它们在收割系统令牌方面同样有用：把三四个深度递增的 box-shadow 复制进你的 --shadow-sm、--shadow-md、--shadow-lg 令牌；把两个渐变复制进 --bg-primary 和 --bg-secondary；把一系列 border-radius 值复制进 --radius-sm 等。生成器帮助你以可视化的方式做出这些决定，而不是去猜数字再刷新页面。
CSS Grid 生成器输出带命名线条的 grid-template-columns 和 grid-template-rows，这正是你为一个系统所想要的。Flexbox 生成器对 flex 布局做同样的事。两者产出的代码你都可以原样包进一个类或一个 Tailwind 组件。对于使用 Tailwind 的项目，这些值往往可以直接转换：1rem 的间距变成 gap-4，0.5rem 的边框圆角变成 rounded-md。对于不用 Tailwind 的项目，原始的 CSS 变量通常正是你在设计系统文件中想要的。可视化选择这一步是你无法轻易自动化的部分。
常见问题
这些 CSS 生成器在较旧的浏览器上能工作吗？
它们输出的标准语法受到自 2019 年以来发布的每一个浏览器的支持，根据 StatCounter 和 caniuse 的数据，这覆盖了全球超过 97% 的用户。对于 Internet Explorer 11（约占全球流量的 0.5%，主要是企业内网用户），大多数功能不会渲染。现代 Safari 通过 -webkit- 前缀支持 backdrop-filter，毛玻璃拟态工具会在标准属性旁一并输出它。
为什么我的渐变看起来有条带？
8 位色（每通道 256 个等级）无法表示两种相近颜色在长距离上的平滑过渡，你会在校准过的屏幕上看到可见的“条带”。解决办法：把渐变拉伸得少一些，添加第三个颜色停止点来打断条带，用一个 SVG 噪声滤镜对渐变做抖动处理，或使用 OKLCH 渐变插值（Chrome 和 Safari 支持），它在一个感知上均匀的空间中插值。
我应该用 CSS keyframes 还是 transitions？
transitions 用于从一个状态过渡到另一个状态（悬停、点击、聚焦）；它们是声明式的，浏览器处理其余部分。keyframes 用于具有多个步骤或确定序列的动画（一个加载旋转器、一连串错落出现的揭示）。对于简单的状态变化用 transitions；对于任何多步骤的东西用 keyframes。本网站的 Cubic Bezier 和动画生成器涵盖这两种情况。
我怎样让毛玻璃拟态效果好看？
三个设置最为重要：一个半透明背景（从 rgba(255,255,255,0.1) 到 0.3）、一个范围在 10 到 30px 的真正的 backdrop-filter: blur()，以及一个 1px 的边框，其 alpha 值为背景的 1.5 倍，给玻璃一个边缘。没有这三者，它看起来就很平。本网站的毛玻璃拟态生成器把这三者一起调好，并包含 Safari 的回退方案 -webkit-backdrop-filter。
rem、em 和 px 有什么区别？
px 是一个绝对尺寸：1px 是一个 CSS 像素，浏览器会根据设备的像素比把它缩放到物理像素。em 相对于元素父级的字号，因此在字号为 16px 的元素的子级上，1.5em 就是 24px。rem 相对于根 html 元素的字号，默认是 16px，但可以通过根字号为无障碍而更改。对于应当尊重用户浏览器缩放和字号偏好的尺寸用 rem，对于应当保持不变的尺寸用 px（1px 边框、固定图标尺寸）。
我需要 CSS 预处理器才能使用这些工具吗？
不需要。每个生成器都输出能直接在 .css 文件中工作的标准 CSS。预处理器（Sass、Less、Stylus）在你想要变量、嵌套、混入或编译期计算时很有用，但现代 CSS 现在已原生支持自定义属性（变量）、嵌套以及许多过去需要预处理器的功能。这些工具的输出与预处理器无关：把它粘贴进 Sass 文件或一个普通的 CSS 文件都一样。