美しいグラデーションをデザインし、CSS または画像としてエクスポート
色を選択し、ストップを追加し、角度または中心点を調整して、必要な正確なグラデーションを作成します。このツールは、無制限のカラーストップを使用して、線形、放射状、円錐形のグラデーションをサポートします。スタイルシートの CSS コードをコピーするか、デザイン プロジェクトで使用するためにグラデーションを高解像度 PNG としてダウンロードします。
このツールは無料で使用できますBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
使用方法
グラデーションの種類を選択してください
線形、放射状、または円錐形を選択します。直線の場合は角度を設定します。放射状の場合は、中心点と形状を設定します。
色の追加と調整
グラデーション バーをクリックしてカラーストップを追加します。ドラッグして位置を変更し、ダブルクリックして色を変更し、各ストップの不透明度を調整します。
CSSをコピーまたはダウンロード
生成された CSS コードを Web 用にコピーするか、解像度を設定してグラデーションを PNG 画像としてダウンロードします。
特徴
3つのグラデーションタイプ
任意の角度の線形グラデーション、中心と形状を調整できる放射状グラデーション、または点の周りをスイープする円錐形のグラデーションを作成します。タイプを切り替えると、プレビューが即座に更新されます。
無制限のカラーストップ
グラデーション バーに沿って、必要な数のカラー ストップを追加します。ストップをドラッグして位置を変更したり、ダブルクリックして色を変更したり、右クリックして削除したりできます。各ストップは、半透明のグラデーションの不透明度をサポートします。
CSSコード出力
このツールは、ベンダー プレフィックスを含む有効な CSS 背景画像コードを生成します。コードをコピーし、スタイルシートに直接貼り付けます。グラデーションを編集すると、出力がリアルタイムで更新されます。
PNG画像のエクスポート
100 ピクセルのサムネイルから 4000 ピクセルのバナーまで、任意の解像度でグラデーションを PNG としてダウンロードします。 CSS グラデーションをサポートしていないツールの背景、オーバーレイ、またはデザイン要素として画像を使用します。
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai Enhance仕様
| グラデーションの種類 | リニア、ラジアル、円錐 |
| カラーストップ | 無制限 |
| 角度範囲 | 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.
HEX、RGB、HSL、HSB、CMYK、CSS の名前付き形式の間で色を変換します。ライブ プレビューを表示し、任意の値をコピーし、カラー カードをエクスポートします。サインアップは必要ありません。
HEX カラー コードを RGB 値に、またはその逆に変換します。ライブ プレビュー、ワンクリック コピー、CSS スニペット出力。サインアップは必要ありません。ブラウザで動作します。
アップロードされた画像から任意の色を選択すると、その HEX、RGB、および HSL コードが即座に取得されます。 Web デザイン、ブランディング、イラスト用の写真からパレットを作成します。
写真をアップロードし、HEX、RGB、HSL コードを使用して 5 ～ 10 の主要な色を抽出します。スウォッチをコピーし、ASE または CSS 変数としてエクスポートします。サインアップは必要ありません。
URL、テキスト、WiFi 認証情報、および vCard の QR コードを生成します。色をカスタマイズし、センターのロゴを追加し、PNG または SVG としてダウンロードします。サインアップは必要ありません。
画像とビデオの幅、高さ、またはアスペクト比を計算します。任意の 2 つの値を入力すると、3 番目の値が取得されます。ソーシャルメディア、映画、印刷物のプリセット比率。サインアップは必要ありません。