CSSグラデーションジェネレーター
無料オンライン CSS グラデーション生成ツール、リアルタイムプレビュー
CSS グラデーションタイプ
線形グラデーションは、角度または方向で定義された直線に沿って色を遷移させます。放射グラデーションは、中心点から外向きに円形または楕円形に色を遷移させます。両方とも 3 つ以上の色間の複雑な遷移のための複数のカラーストップをサポートします。
CSS グラデーションの作成方法
グラデーションタイプ（線形または放射）を選択し、開始色と終了色を選択し、線形グラデーションの角度を調整します。ツールが CSS コードを即座に生成します。CSS をコピーして、background または background-image プロパティとしてスタイルシートに貼り付けます。
▶グラデーションに 2 つ以上の色を使用できますか？
はい、CSS グラデーションは無制限のカラーストップをサポートしています。追加の色値をコンマで区切って追加して、生成された CSS コードを変更します。
▶CSS グラデーションのブラウザサポートは？
CSS グラデーションはすべての最新ブラウザでサポートされています。古いブラウザの場合、ベンダープレフィックス（-webkit-gradient）またはソリッドフォールバックカラーが必要な場合があります。
▶グラデーションに透明度を使用できますか？
はい。rgba() または hsla() カラー値を使用して透明度を含めます。例：linear-gradient(135deg, rgba(255,0,0,0.5), transparent) は半透明の赤グラデーションを作成します。
このツールが役に立ったら、作者にコーヒーをおごってください。
コーヒーをおごる