设计工具工具
CSS 生成器、颜色工具和 SVG 创建
颜色代码转换器
在 HEX、RGB 和 HSL 颜色代码之间转换。 使用取色器和实时预览直观选择颜色。
取色器
使用色轮和滑块直观选择颜色。 获取并复制 HEX、RGB 和 HSL 格式的颜色代码。
图片颜色提取器
自动检测图片中的主色调并生成色板。 还可以点击图片任意位置提取单个颜色。
图片平均色提取器
计算整张图片或选定区域的平均颜色。 适用于配色方案选择或缩略图背景色。
CSS 渐变生成器
通过拖拽控制可视化创建 CSS 渐变。 支持线性、径向和锥形渐变类型，带预设。
CSS 阴影生成器
通过滑块可视化创建 CSS box-shadow。 支持多重阴影和内阴影。
CSS 圆角生成器
生成可单独控制每个角的 CSS border-radius。 包含椭圆半径选项和常用形状预设。
CSS 文字阴影生成器
带实时预览的 CSS text-shadow 生成器。 支持叠加多重阴影，包含霓虹灯、浮雕等预设。
CSS 三角形生成器
使用 border 属性生成 CSS 三角形。 支持全部8个方向，可自定义大小和颜色。
CSS 裁剪路径生成器
通过拖拽可视化创建 CSS clip-path 形状。 包含多边形、圆形、椭圆以及星形、心形等预设。
CSS 毛玻璃效果生成器
创建毛玻璃 UI 效果，带实时预览和 CSS 输出。 精细调整透明度、模糊、边框和阴影设置。
CSS 加载动画生成器
从多种 CSS 加载动画中选择并获取代码。 自定义颜色、大小和速度，包含旋转、点阵、进度条等样式。
CSS Flexbox 生成器
可视化创建 Flexbox 布局并生成 CSS 代码。 内置速查表，可调整所有属性。
CSS 贝塞尔曲线生成器
可视化创建 CSS 动画缓动曲线。 拖动控制手柄并实时预览动画效果。
颜色渐变生成器
为任意颜色生成从亮到暗的渐变色。 可调整步数并导出为 Tailwind CSS 调色板。
颜色混合器
按指定比例混合两种或多种颜色创建新颜色。 支持 RGB、HSL 和 LAB 等不同色彩空间的结果对比。
调色板生成器
基于色彩理论从基础颜色生成调色板。 包括互补色、类似色、三色组等配色方案。
网页字体预览
实时预览 Google Fonts 中的网页字体。 调整大小和颜色的同时比较多种字体。
HTML颜色名称参考
一站式浏览全部148种HTML/CSS命名颜色。 搜索、预览并轻松复制HEX颜色代码。
CSS背景图案生成器
使用纯CSS生成背景图案。 通过可视化编辑器自定义条纹、圆点、格纹等图案。
CSS滚动条生成器
通过可视化编辑器自定义CSS滚动条设计。 调整颜色、宽度、圆角，直接复制代码。
CSS渐变文字生成器
生成将渐变效果应用于文字的CSS代码。 实时预览颜色、方向和范围的调整效果。
CSS复选框生成器
通过可视化编辑器创建自定义CSS复选框。 自由定制动画、颜色和形状。
CSS开关按钮生成器
通过可视化编辑器创建自定义CSS开关按钮。 调整大小、颜色和动画，然后导出代码。
SVG流体形状生成器
自动生成有机流体形状的SVG。 调整随机性和复杂度，用于网页设计装饰。
SVG图案生成器
生成可重复平铺的SVG图案。 自定义图案类型、颜色和大小，然后导出代码。