CSSグラデーションメーカー
最大5つのカラーストップ、複数の方向、3つのグラデーションタイプ, リニア、ラジアル、コニックを持つカスタムCSSグラデーションをデザイン。即座のプレビューと本番環境対応のCSSコード。ヒーローセクション、ボタン、背景、モダンウェブデザインに最適。
CSSグラデーションメーカー
最大5つのカラーストップ、複数の方向、3つのグラデーションタイプ, リニア、ラジアル、コニックを持つカスタムCSSグラデーションをデザイン。即座のプレビューと本番環境対応のCSSコード。ヒーローセクション、ボタン、背景、モダンウェブデザインに最適。
0%100%
°
1
%
2
%
3
%
@%
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);How to Use the Gradient Maker
- 1Pick a gradient type. Choose Linear, Radial, or Conic from the top-left buttons. Linear goes in a straight line, Radial spreads from a center point, and Conic rotates around a center.
- 2Set the direction. For Linear, type an angle (e.g. 90 for left-to-right). For Radial or Conic, pick a position like center or top left.
- 3Click the gradient bar to add stops. Each click adds a new color point. Drag the markers left or right to change where colors blend.
- 4Edit any stop. Below the gradient bar you'll see a card for each color stop. Click one to select it, then change its color, type a hex value, or adjust the position percentage. Use the trash icon to remove a stop.
- 5Copy the CSS. When you're happy, click the copy icon next to the CSS code at the bottom. Paste it into your stylesheet and you're done.