画像Processado no seu navegador
CSS グラデーション ジェネレーター
線形、放射状、円錐形のグラデーションを視覚的に作成し、CSS または Tailwind として即座にエクスポートします。
本日 0/3 回使用 · 残り 3 回。Proに移行して制限を解除しましょう。.
タイプ
linear
ストップ
3/8
エクスポート
CSS + Tailwind
メッシュ
メッシュ有効
01
プレビューとコード
ベースカラー
カラー01
#8C6A2D
グラデーションの開始色。
カラー02
#D3B06F
グラデーションの終了色。
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02
ストップと構成
カラーストップ
#8C6A2D
0% · 100%
位置
不透明度
#D3B06F
52% · 96%
位置
不透明度
#2B1D08
100% · 100%
位置
不透明度
03
ジオメトリ
タイプと方向
タイプ
角度
135°
中心とオプション
中心X
50%中心Y
50%リピート
ディバイダー、パターン、プロダクトラインに有効なリズムを生みます。
04
高度な出力
メッシュオーバーレイ
ビジュアルヒーローや奥行きのあるサーフェス向けのオーバーレイ。
2レイヤー
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
トークンパック
Hero・Surface・Accentを含む実装可能なCSV。
:root {
--gradient-stop-1: #8C6A2D;
--gradient-stop-2: #D3B06F;
--gradient-stop-3: #2B1D08;
--gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
}
§ 使い方
CSSグラデーションをビジュアルで生成する方法
リニア・ラジアル・コニックのグラデーションをリアルタイムプレビューで作成し、すぐ使えるCSSをエクスポート。
グラデーションの種類を選ぶ
Linear（最もよく使われる方向性のある遷移）、Radial（中心から外側へ広がる）、Conic（弧を描く — チャートに最適）から選択。
カラーとストップを設定する
2色以上追加し、ドラッグで各ストップの位置を調整。カラー指定はHEX・RGB・HSLに対応。
角度または中心点を調整する
Linear：0deg（垂直）、90deg（水平）、45deg（斜め）。Radial：原点をピクセルまたは%で指定。
CSSをコピーする
スタイルシートにそのまま貼り付けられるコードを生成。互換性を最大化する-webkit/-mozプレフィックス付き。
関連
関連ツール
Da mesma categoria.
Pro
バッチウォーターマーカー
ウォーターマーク、ロゴ、ライセンスを一度に最大 50 枚の写真に適用することで、不動産のアップロードを高速化します。ジップアウト。
無料
ムードボード
画像 URL・hex パレット・キーワードをエクスポート可能なビジュアルグリッドに組み合わせ。
Max
AI背景除去ツール
あらゆる画像から背景を完璧に切り取って除去する人工知能。
Pro
魔法のカラーパレット
ベースカラーを入力すると、調和のとれたスキーム (類似、単色、補色) が即座に生成されます。
無料
WCAG コントラストチェッカー
色のコントラストと WCAG AA/AAA 適合性をプレビュー・エクスポート付きで確認。
無料
EXIF ビューアー
画像のメタデータを表示:GPS、カメラ、撮影日時など。