设计与色彩 工具

直观地设计分层框阴影并复制可用于生产的 CSS。

创建具有多个色标的线性、径向和圆锥渐变。

独立控制每个角落并预览有机形状和药丸。

通过实时样本和对比度提示在 HEX、RGB、HSL 和 HSV 之间进行转换。

测量文本对比度并检查普通文本和大文本的 AA/AAA 合规性。

使用可配置的根字体大小将像素转换为 rem 并返回。

直观地构建 Flexbox 布局并复制 CSS。

直观地创建响应式 CSS 网格列、行和间隙。

使用边框技巧在任意方向创建 CSS 三角形。

创建带有模糊、色调、边框和阴影的磨砂玻璃卡片。

使用 WebKit 和 Firefox CSS 属性设置滚动条样式。

创建具有可配置时序的淡入淡出关键帧动画。

创建在视口之间平滑缩放的clamp()字体大小。

在视觉上结合模糊、亮度、对比度、饱和度和色调滤镜。

从基色生成互补、类似、三元和四元调色板。

从任何基色创建五种色调和五种色调。

为部分分隔线和背景生成平滑的 SVG 波浪路径。

使用系统字体预览标题和正文字体配对。

复制用于 UI 和散文的现成系统字体堆栈。

设计分层文本阴影并复制 CSS。