CSS 生成器

边看预览边调出渐变色、box-shadow 阴影、背景图案、圆角和边框,一键复制 CSS 代码。

功能特点

  • linear / radial / conic 三种渐变,可调角度和色标(最多 8 个,可增删、可指定位置)
  • box-shadow 阴影支持多层叠加,inset 内阴影和不透明度都能实时调整
  • 条纹、圆点、棋盘格背景图案,纯 CSS 实现,不用图片
  • 四个角分别设置 border-radius,并可加边框。每个标签页都有大尺寸预览,CSS 直接复制

适用场景

代替头图做背景

不用切图,只用渐变色就能做出标题区背景,页面加载也更快。

调卡片阴影

一点点调整模糊和扩展,找到不过分“飘”的自然投影。

做背景底纹

用纯 CSS 铺条纹或圆点,不增加图片请求。

和同事对效果

把链接发过去,对方打开就是同样的设置,可以接着调。

隐私说明

CSS 的生成和预览全部在浏览器本地完成,不会上传到服务器。只有在生成分享短链接时,分享链接(含设置内容)才会发送给短链接服务。

常见问题

生成的 CSS 可以直接用吗?

可以。把 background、box-shadow 等属性原样复制,粘贴到目标元素的样式里即可。代码不带浏览器前缀(-webkit- 等)。linear-gradient、radial-gradient 和 box-shadow 在主流浏览器中早已稳定支持;conic-gradient 是相对较新的特性。

色标的位置可以省略吗?

CSS 语法上可以省略,省略时各色标会均匀分布。本工具为了明确表达位置,始终输出百分比;不需要的话,粘贴后把数值删掉即可。

box-shadow 最多能叠几层?

CSS 本身没有上限,用逗号分隔可以写任意多层。本工具为了便于操作,限制为最多 5 层。想要自然的投影,通常把“小而深”和“大而淡”的阴影叠 2~3 层就很好看。

背景图案用到图片了吗?

没有。条纹用 repeating-linear-gradient,圆点用 radial-gradient 加 background-size,棋盘格用 conic-gradient 实现。不增加图片请求,放大也不会模糊,改颜色只要改代码。

相关工具

渐变色

类型
deg

色标

预设

预览

生成的 CSS