CSS 生成器

CSS 生成器

渐变、阴影、圆角可视化生成与实时预览

类型

角度：90°

色停（按位置自动排序）

0%

100%

实时预览

生成的 CSS

.preview {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
  box-shadow: 0px 10px 15px -3px #00000040;
  border-radius: 12px 12px 12px 12px;
}

💡 使用说明

渐变支持线性 / 径向与多色停，位置倒序时会自动排序后生成。

阴影支持多层叠加，可设置 x / y / blur / spread、颜色与 inset。

圆角支持四角独立值与「水平 / 垂直」斜杠语法（border-radius: a b c d / e f g h）。

相关工具

开发工具

JSON 格式化JSON 数据格式化、压缩、验证和自动修复 JSON 转类型JSON 一键生成 TS/Go/Rust 类型文本 Diff 对比使用 Monaco 显示文本差异 YAML 格式化YAML 数据格式化和验证 HTML 格式化HTML 代码格式化、压缩与解转义 Markdown 在线编辑工具栏快捷插入、实时预览、公式/图表渲染、导入导出、自动保存 SVG 在线编辑编辑 SVG 源码并实时预览结果 PNG 转 SVG将 PNG 包装为保持透明度的 SVG Mermaid 在线编辑编辑 Mermaid 图表并实时生成 SVG SQL 格式化SQL 语句格式化和美化 HTML 转义HTML 实体编码/解码 curl 转代码curl 命令转 fetch/axios/requests JSONPath / jq 查询JSONPath 与 jq 路径查询 Flexbox 可视化Flexbox 布局可视化与 CSS 生成缓动曲线编辑器cubic-bezier 缓动曲线可视化编辑，生成 transition / animation 时间函数 CSS 剪切路径clip-path 可视化编辑，支持自由绘制多边形，上传图片按形状裁剪导出字体子集化按需提取字形生成 WOFF2/WOFF/TTF 子集，本地处理目录树生成器选择本地文件夹生成 tree 风格目录树文本，支持层级、排序与过滤