Skip to content
無料ツールDesign

美しいグラデーションをデザインし、CSS または画像としてエクスポート

色を選択し、ストップを追加し、角度または中心点を調整して、必要な正確なグラデーションを作成します。このツールは、無制限のカラーストップを使用して、線形、放射状、円錐形のグラデーションをサポートします。スタイルシートの CSS コードをコピーするか、デザイン プロジェクトで使用するためにグラデーションを高解像度 PNG としてダウンロードします。

このツールは無料で使用できます

特徴

1

3つのグラデーションタイプ

任意の角度の線形グラデーション、中心と形状を調整できる放射状グラデーション、または点の周りをスイープする円錐形のグラデーションを作成します。タイプを切り替えると、プレビューが即座に更新されます。

2

無制限のカラーストップ

グラデーション バーに沿って、必要な数のカラー ストップを追加します。ストップをドラッグして位置を変更したり、ダブルクリックして色を変更したり、右クリックして削除したりできます。各ストップは、半透明のグラデーションの不透明度をサポートします。

3

CSSコード出力

このツールは、ベンダー プレフィックスを含む有効な CSS 背景画像コードを生成します。コードをコピーし、スタイルシートに直接貼り付けます。グラデーションを編集すると、出力がリアルタイムで更新されます。

4

PNG画像のエクスポート

100 ピクセルのサムネイルから 4000 ピクセルのバナーまで、任意の解像度でグラデーションを PNG としてダウンロードします。 CSS グラデーションをサポートしていないツールの背景、オーバーレイ、またはデザイン要素として画像を使用します。

使用方法

1

グラデーションの種類を選択してください

線形、放射状、または円錐形を選択します。直線の場合は角度を設定します。放射状の場合は、中心点と形状を設定します。

2

色の追加と調整

グラデーション バーをクリックしてカラーストップを追加します。ドラッグして位置を変更し、ダブルクリックして色を変更し、各ストップの不透明度を調整します。

3

CSSをコピーまたはダウンロード

生成された CSS コードを Web 用にコピーするか、解像度を設定してグラデーションを PNG 画像としてダウンロードします。

仕様

グラデーションの種類リニア、ラジアル、円錐
カラーストップ無制限
角度範囲0~360°
CSS出力標準 + ベンダー プレフィックス
PNG エクスポート最大4000×4000ピクセル
処理クライアント側 (インスタント)

Related Magic Eraser Tools

よくある質問

透明度のあるグラデーションを作成できますか?

+

はい。各カラーストップには不透明度スライダーがあります。グラデーション内に半透明の領域を作成するには、不透明度を 100% 未満に設定します。 CSS 出力では rgba 値が使用され、PNG エクスポートではアルファ チャネルが保持されます。

円錐勾配とは何ですか?

+

円錐形のグラデーションは、時計の針のスイープのように、中心点の周りで色の停止を放射します。円グラフ スタイルの効果、カラー ホイール、装飾的な背景に便利です。最新のブラウザではブラウザのサポートが優れています。

生成された CSS はどのフレームワークでも使用できますか?

+

はい。出力は、プレーン HTML、React、Vue、Tailwind、およびインラインまたはスタイルシートベースの CSS をサポートするその他のフレームワークで動作する標準 CSS です。

写真にグラデーションが必要ですか?

AI Enhance は写真の色調と照明を調整でき、画像オーバーレイ ツールを使用すると、画像の上にグラデーションをブレンドして洗練された外観を実現できます。

無料でお試しください

More free tools

Explore our other limited free edits after sign-in photo and image tools.

あらゆる画像のサイズを完璧なサイズに変更します

ソーシャル メディア、Web、印刷用に画像のサイズを正確なピクセル寸法に変更します。サインアップは必要ありません。最大 50 MB の JPEG、PNG、および WebP をサポートします。

鮮明さを損なうことなく画像ファイルのサイズを縮小します

目に見える品質の低下を最小限に抑えながら、JPEG、PNG、および WebP 画像を最大 80% 圧縮します。品質スライダーを調整して完全に制御します。サインアップは必要ありません。

数秒で PNG 画像を JPEG に変換します

PNG 画像を即座に JPEG 形式に変換します。出力品質を調整し、透明な領域の背景色を選択してダウンロードします。サインアップは必要ありません。

透明度をサポートして JPEG 写真を PNG に変換します

JPEG 画像を PNG 形式に変換して、ロスレス品質と透明度をサポートします。背景除去前に最適です。サインアップやインストールは必要ありません。

iPhone HEIC写真を瞬時にJPEGに変換

Apple HEIC および HEIF 写真を汎用互換性のある JPEG 形式に変換します。ブラウザで動作します。アプリのインストール、サインアップ、サーバーへのファイルのアップロードは必要ありません。

画像を WebP 形式に変換したり、WebP 形式から画像を変換したりできます

ページの読み込みを高速化するために JPEG および PNG を WebP に変換するか、互換性のために WebP を JPEG/PNG に変換し直します。サインアップやインストールは不要で、ブラウザーで実行されます。