CSS 渐变与阴影生成

调好参数直接复制 CSS，渐变和阴影两个方向都可以实时预览。

角度：135°

重复渐变 repeating-

CSS

background-image: linear-gradient(135deg, #0c6b4d 0%, #e7f4ee 100%);

参数说明

线性渐变的角度按顺时针从下往上算，0deg 是从下到上，90deg 是从左到右，135deg 是从左上到右下。径向渐变的 at 后面跟圆心位置，可以是 center、top left 或 30% 70%。

色标的位置可以填百分比或像素，不填就交给浏览器自动均匀分布。重复渐变会在色标区间之外继续平铺，配合百分比位置能得到条纹效果。锥形渐变的角度是起始方向，色标位置在圆环上按 0 到 100% 绕一圈。

阴影每一层的四个数字依次是水平偏移、垂直偏移、模糊半径和扩散半径，颜色支持 rgba() 带透明度。多层阴影按书写顺序从下往上叠加，靠前的层画在最上面。勾上 inset 变成内阴影，常用于输入框的内凹效果。