设计与 CSS
可视化生成 CSS:阴影、渐变、Flexbox 与 Grid 布局、动画和调色板
以可视化方式构建 CSS 并复制代码:盒子阴影和文字阴影、渐变和网格渐变、Flexbox 与 Grid 布局、圆角、clip-path 裁剪路径、滤镜、变换、动画,以及玻璃拟态和新拟态效果。调色板和色阶生成器帮助你建立统一的配色体系,SVG 波浪、色块和图案生成器可以制作轻量的背景。
本类工具数量:18
推荐从这里开始
本类全部工具
-
CSS 动画生成器
从预设或自定义关键帧创建 CSS @keyframes 动画,设置时长、延迟、循环次数、方向、填充模式和 cubic-bezier 曲线。
-
圆角生成器
生成 CSS border-radius,支持独立设置四角、椭圆的 X/Y 半径、px 或 % 单位和不规则圆预设,输出最短的有效简写。
-
裁剪路径生成器
创建 CSS clip-path 形状:带可拖动点和预设的多边形、圆形、椭圆,以及带圆角的 inset。实时预览并复制代码。
-
调色板生成器
从基础色出发,用互补、类似、三角、四角、正方形或单色方案生成调色板。可锁定颜色,并导出 CSS 和 Tailwind 代码。
-
色阶生成器
把一个颜色变成 Tailwind 风格的 50–950 色阶,以及明色、暗色和灰调。在 OKLCH 和 sRGB 中计算,可导出为 CSS 变量、Tailwind 或 JSON。
-
CSS 盒阴影生成器
可视化构建 CSS box-shadow:叠加多层阴影,设置偏移、模糊、扩展、内阴影和 RGBA 不透明度,实时预览并复制简洁的代码。
-
CSS Flexbox 生成器
可视化设置弹性容器的方向、换行、主轴与交叉轴对齐、间距,以及每个项目的伸缩、顺序和自身对齐,实时显示子项并可复制 CSS。
-
CSS 渐变生成器
设计线性、径向和锥形 CSS 渐变,支持可拖动色标、角度、重复模式和 OKLCH 插值。实时预览并复制代码。
-
CSS Grid 生成器
可视化构建 CSS Grid 布局:grid-template-columns/rows、带校验的命名区域、间距、对齐和每个项目的定位,复制简洁的 CSS。
-
CSS 滤镜生成器
在示例图片或你自己的图片上组合 CSS filter 函数:模糊、亮度、对比度、灰度、色相旋转、反相、不透明度、饱和度、褐色和 drop-shadow。
-
玻璃拟态生成器
生成磨砂玻璃 CSS:backdrop-filter 模糊与饱和度、着色颜色与不透明度、边框和阴影,并包含 Safari 所需的 -webkit- 前缀。
-
网格渐变生成器
用多层径向渐变制作柔和的网格风格 CSS 背景。拖动颜色点、设置扩散范围,用随机种子随机生成,并复制纯 CSS 代码。
-
新拟态生成器
生成柔和 UI(新拟态)CSS:由基础色推算出亮、暗两层阴影,支持平面、内凹、外凸和按下形状,以及四个光源方向。
-
CSS 图案生成器
创建纯 CSS 背景图案:圆点、波尔卡圆点、条纹、棋盘格、网格、锯齿和十字网格,可设置颜色、图块大小和粗细,无需图片。
-
SVG 色块生成器
创建平滑的有机 SVG 色块形状,可调节锚点数、随机程度和种子。支持纯色、渐变或描边填充,可下载 .svg 或复制 CSS data URI。
-
SVG 波浪生成器
生成平滑、尖峰或阶梯状的 SVG 波浪,支持多层、振幅和随机种子。可下载 .svg,或复制为用于分隔区块的 CSS 背景 data URI。
-
文字阴影生成器
创建多层的 CSS text-shadow 效果:发光、描边、复古 3D 和浮雕文字。使用自己的文字实时预览,并可复制代码。
-
CSS 变换生成器
生成 CSS transform 值:平移、旋转、缩放、倾斜,以及 3D 透视、rotateX/rotateY 和 translateZ,并支持 transform-origin 和实时预览。
其他分类
- CRC 用于错误检测的循环冗余校验算法
- MD 消息摘要算法(MD2、MD4、MD5)
- SHA-1 安全哈希算法 1 - 160位哈希函数
- SHA-2 安全哈希算法 2 系列(SHA-224、SHA-256、SHA-384、SHA-512)
- SHA-3 基于 Keccak 的安全哈希算法 3
- Keccak Keccak 加密哈希函数
- SHAKE 可扩展输出函数(SHAKE128、SHAKE256)
- cSHAKE 可定制的 SHAKE 函数
- KMAC Keccak 消息认证码
- 密码与安全 密码生成、分析、哈希和安全工具
- 加密与密码学 对称与非对称加密、HMAC 和密钥生成(AES、3DES、RSA、PGP)
- 编码 编码与解码数据:Base64、Base32、Base58、URL、HTML 实体、十六进制、Unicode 等
- 格式化工具 格式化、压缩和校验代码与数据(JSON、XML、YAML、SQL、HTML、CSS),并转换命名风格
- 生成器 生成 ID、密钥、测试数据、二维码、条形码和配置文件(UUID、API 密钥、.gitignore、Dockerfile)
- 转换器 转换数据格式、进制、颜色、时间戳、单位和货币(JSON、CSV、YAML、XML)
- 文本工具 统计、对比、清理和转换文本(字数统计、文本对比、正则、大小写、去重)
- 图像工具 用于操作和转换图像的工具(压缩、调整大小、转换)
- Web 工具 面向 Web 开发和 SEO 的工具(JWT、URL、DNS、HTTP 响应头、meta 标签、站点地图)
- 数学与计算器 理财、健康、百分比、程序员运算和日常数学计算器
- 时间与日期 时区换算、日期差、工作日、计时器、秒表和世界时钟