linear-gradient(135deg, ...) ランダム生成 CSSをコピー グラデーションの種類 リニア 放射状 コニック 角度 ° 形状 円形 楕円形 中心位置 ↖ ↑ ↗ ← · → ↙ ↓ ↘ 開始角度 ° カラーストップ + カラーストップを追加 プリセット CSSコード コピー CSSグラデーションジェネレーターの使い方 グラデーションの種類を選ぶ — リニア（直線）・放射状・コニック（扇形）の3種類から選択できます。 ...
すべて ピンク レッド オレンジ イエロー グリーン ティール ブルー パープル ダーク パステル ウォーム マルチ グラデーションが見つかりません。別のキーワードをお試しください。 カスタマイズ ✕ 種類 リニア 放射状 コニック 角度 135° 色1 % 色2 % CSSをコピー クリックして閉じる クリップボードにコピーしました！ 100種類以上のCSSグラデーションプリセットを一覧で閲覧できます。カードをクリックするとカスタマイザーが開き、色・角度・種類を自由に調整できます。スウォッチをダブルクリックするとフルスクリーンプレビューが表示されます。 ...
グラデーションボーダーを数秒で作成。色・方向・幅・角丸を自由にカスタマイズして、すぐに使えるCSSコードをコピーできます。外部ライブラリ不要・登録不要。 プレビュー カラーストップ ＋ カラーストップを追加 グラデーションの方向 ↑ 0° ↗ 45° → 90° ↘ 135° ↓ 180° ↙ 225° ← 270° ↖ 315° カスタム角度 ° ボーダー設定 ボーダー幅 3px 角丸（radius） 12px パディング 20px CSSの実装方法 background-clip（推奨） border-image background-clip: padding-box を使用。角丸（border-radius）対応で全ブラウザで動作します。 ...