画像無料・1日3回ブラウザ内で処理

CSSグラデーション作成

線形・円形・円錐グラデーションを見ながら作り、CSSやTailwindで書き出せます。

タイプ

linear

ストップ

3/8

エクスポート

CSS + Tailwind

メッシュ

メッシュ有効

プレビューとコード

ベースカラー

カラー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%)]

ストップと構成

カラーストップ

#8C6A2D

0% · 100%

位置

不透明度

#D3B06F

52% · 96%

位置

不透明度

#2B1D08

100% · 100%

位置

不透明度

ジオメトリ

タイプと方向

タイプ

角度

135°

中心とオプション

中心X

50%

中心Y

50%

リピート

ディバイダー、パターン、プロダクトラインに有効なリズムを生みます。

高度な出力

メッシュオーバーレイ

ビジュアルヒーローや奥行きのあるサーフェス向けのオーバーレイ。

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%); }