CSS グラデーション生成

開発者ユーティリティ

線形または放射状の CSS グラデーションをライブプレビュー付きで作成し、CSS をコピーできます。

使い方

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

よくある質問

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

関連ツール

カラーパレット生成任意の色から淡色、濃色、類似色、補色、トライアドのパレットを生成します。 CSS ボックスシャドウ生成オフセット、ぼかし、広がり、色のスライダーでボックスシャドウを作成し、CSS をコピーします。カラーコンバーターライブプレビュー付きで色を HEX、RGB、HSL の間で変換します。 UUID / GUID ジェネレーターランダムなバージョン4 UUID を生成し、1つずつまたはまとめてコピーします。ハッシュジェネレーター任意のテキストの MD5、SHA-1、SHA-256、SHA-512 ダイジェストを計算します。タイムスタンプ変換 Unix タイムスタンプ、ISO 8601、人間が読める現地日時の間で変換します。