グラデーション制作ツール

CSSだけで、線形、円形、扇形、縞模様、繰り返し、重ね合わせが思いのまま制作できる本格的ツール!

レイヤー表示・非表示

複製

削除
種類

形状

縞

角度
▲
▼

中心X
▲
▼

中心Y
▲
▼

位置X
▲
▼

位置Y
▲
▼

サイズX
▲
▼

サイズY
▲
▼

リピート

100%位置
- 　
  
  色め　
  
  表示・非表示
  
  複製
  
  削除
  
  色相
  
  彩度
  
  輝度
  
  開始地点　
  
  ▲
  ▼
  
  終了地点　
  
  ▲
  ▼
  
  不透明度　
  
  ▲
  ▼

background: linear-gradient(hsla(120deg 90% 90% / 0), hsl(120deg 90% 90%));

background: linear-gradient(173deg, hsl(230deg 70% 50%) 46%, hsla(0deg 0% 100% / 0) 54%);

background: radial-gradient(ellipse closest-side, hsl(340deg 100% 97%) 91%, hsl(330deg 100% 71%) 91% 90%, hsl(0deg 96% 100%) 97% 97%, hsl(330deg 100% 71%) 97% 98%, hsl(0deg 96% 100%) 98%);

background: conic-gradient( at 20% 20%, hsl(302deg 59% 65%) 10%, hsl(340deg 100% 97%) 60% 61%);

background: conic-gradient(at 90% 50%, hsl(241deg 9% 31%) 70%, hsl(60deg 17% 70%) 75% 77%, hsl(241deg 9% 31%) 85%);

background: repeating-linear-gradient( 90deg, hsl(180deg 100% 50%) 0% 4%, hsl(60deg 100% 50%) 4% 4.2%, hsla(180deg 100% 50% / 0.2) 4.2% 6%, hsla(180deg 100% 50% / 0.5) 6% 8%);

background: repeating-conic-gradient( at 90% 10%, hsla(120deg 93% 79% / 0.5) 0% 1%, hsla(90deg 100% 50% / 0.1) 1% 1.4%);

background: repeating-linear-gradient( -60deg, hsl(240deg 100% 50%) 0% 15%, hsl(0deg 100% 50%) 15% 20%, hsl(0deg 100% 100%) 20% 25%) 0 0 / 10% 20%;

background: radial-gradient(circle, hsl(160deg 100% 75%) 30%, hsl(0deg 100% 100%) 35%) 0 0 / 6% 16%;

background: conic-gradient(hsla(0deg 100% 100% / 0) 0% 25%, hsl(300deg 76% 72%) 25% 50%, hsla(0deg 100% 100% / 0.2) 50% 75%, hsl(300deg 76% 72%) 75% 100%) 0 0 / 10% 40%;

background: linear-gradient( 90deg, hsla(240deg 100% 50% / 0.5), hsla(0deg 100% 50% / 0.5)), linear-gradient(hsl(0deg 100% 50%), hsl(75deg 100% 50%));

background: conic-gradient( at 80% -50%, hsla(0deg 100% 100% / 0) 50%, hsla(0deg 100% 100% / 0.3) 52% 60%, hsla(0deg 100% 100% / 0) 64%), radial-gradient(circle at 40% 50%, hsl(240deg 100% 25%) 10%, hsl(248deg 39% 39%) 60% 61%);