CSS 生成器 - 章鱼工具箱

CSS 生成器

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

类型

角度：90°

色停（按位置自动排序）

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）。