CSS Gradient Generator

Free online CSS gradient generator. Create beautiful gradients with intuitive UI, copy CSS code instantly. Supports linear and radial gradients, multiple colors. Perfect for web design, backgrounds, and creative projects.

グラデーションタイプ

角度90°

カラー設定

#667eea

#764ba2

生成されたCSS

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

プリセット

使い方

1.グラデーションタイプ（線形または円形）を選択します
2.線形の場合は角度を調整、カラーピッカーで色を選択します
3.「色を追加」ボタンで色を追加、位置（%）を調整します
4.プリセットから好みのグラデーションを選択することもできます
5.「CSSコピー」ボタンでコードをコピーし、プロジェクトに貼り付けます