条纹背景（无重复图片）

  background: linear-gradient(45deg,
    #fb3 25%, #58a 0,
    #58a 50%, #fb3 0,
    #fb3 75%, #58a 0
  );
  background-size: 30px 30px;

文字渐变（常用）

.text-gradient {
  background: linear-gradient(90deg, #42b983, #409eff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 24px;
  font-weight: bold;
}

渐变文字

文字描边渐变

.stroke-gradient {
  color: transparent;
  -webkit-text-stroke: 1px transparent;
  background-image: linear-gradient(red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 24px;
  font-weight: bold;
}

描边文字

网格背景（代码极简）

.grid {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,.1) 1px, transparent 0),
    linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 0);
  background-size: 20px 20px;
}

波浪效果（纯CSS）

.wave {
  height: 40px;
  background: radial-gradient(circle at 10px -5px, transparent 12px, #42b983 13px);
  background-size: 20px 20px;
}

切角效果（不用图片）

.cut-corner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 10px, #409eff 0) top left;
  background-size: 100% 100%;
}

双层边框渐变

.gradient-border {
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(45deg, red, blue);
}

饼图（纯conic-gradient）

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #42b983 0 25%,
    #409eff 25% 65%,
    #ffcc00 65% 100%
  );
}

透明渐变遮罩（图片渐隐）

.fade-img {
  -webkit-mask: linear-gradient(white, transparent);
  mask: linear-gradient(white, transparent);
  width: 300px;
  height: 200px;
}
.fade-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

玻璃拟态渐变

.glass {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  background-image:
    linear-gradient(
      to bottom right,
      rgba(255,255,255,0.3),
      rgba(0,0,0,0.05)
    );
}

霓虹发光边框

.neon {
  border: solid 2px transparent;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(#111, #111),
    linear-gradient(45deg, #0ff, #f0f);
  box-shadow: 0 0 10px #0ff;
}

折叠角效果

.fold {
  background:
    linear-gradient(to left top, transparent 50%, rgba(0,0,0,.1) 0) no-repeat 100% 0 / 1.4rem 1.4rem,
    #58a;
  width: 100%;
  height: 100%;
}