咖啡时间工具箱

CSS 生成器

选择要生成的效果,调整参数,右侧即时预览,下面就是可以直接复制的 CSS。预览用的就是输出的这段代码,所见即所得。

使用限制

使用方法

  1. 选择效果。渐变可以加到 6 个色标,每个色标有颜色和位置(0%-100%);阴影可叠加最多 4 层,并可设为内阴影;圆角四个角可以分别设置,也可以勾选“相同的值”。
  2. 参数一改,预览和下面的 CSS 同时更新。
  3. 点“复制 CSS”粘贴到样式表里;或点“下载 .css 文件”,得到一个 .box { … } 的样式文件。

例:默认的线性渐变输出 background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);。

常见问题

渐变的角度是怎么定义的?

线性渐变里 0deg 表示从下到上,90deg 表示从左到右,180deg 从上到下;圆锥渐变的角度表示起始方向。

box-shadow 里的“扩展”是什么?

让阴影在模糊之前整体变大(正数)或变小(负数)多少像素。

我的设置会被上传吗?

不会,生成和预览都在你的浏览器里完成。