グラデーション囲み枠のアレンジ方法

グラデーション囲み枠の

アレンジ方法をご紹介します。

囲み枠のコードの

linear-gradientの部分を探して

カラーやグラデーションをアレンジしてくださいね♡

グラデーションの上下を変える方法

linear-gradient(上色,下色)の

上下の色を入れ替えることで

グラデーションを変えることができます。

例）上品なピンク背景と外枠

ピンクのグラデーション（下が薄い）

<div style="display:inline-block; padding:2px; border:2px solid #FFE3F6;"><div style="display:inline-block; background: linear-gradient( #FFE3F6,#FFFFFF); padding:10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

上下の色を入れ替えると

上から下に濃くなります。

ピンクのグラデーション（上が薄い）

<div style="display:inline-block; padding:2px; border:2px solid #FFE3F6;"><div style="display:inline-block; background: linear-gradient( #FFFFFF,#FFE3F6); padding:10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

グラデーションの左右を変える方法

linear-gradient(45deg, 左上色, 右下色); の

左右の色を入れ替えることで

グラデーションを変えることができます。

例）ピンクグラデーション×ゴールドのふんわりかわいい枠線

ピンクグラデーション×ゴールド

<div style="display:inline-block; background-image: linear-gradient(45deg, #FEE1F5, #FEECE8); padding:10px; border:1px solid #D3BB83;">本文はここに入力してください。改行はShift+Enterで！</div>

左右を入れ替えるとグラデーションが変わります。

ピンクグラデーション×ゴールド

<div style="display:inline-block; background-image: linear-gradient(45deg, #FEECE8, #FEE1F5); padding:10px; border:1px solid #D3BB83;">本文はここに入力してください。改行はShift+Enterで！</div>

グラデーションの上中下を変える方法

linear-gradient(上色,中色,下色); の

上中下の色を入れ替えることで

グラデーションを変えることができます。

例）グリーングラデーションの囲み枠

グリーングラデーション
（中央が明るい）

<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #d3f2f5; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで！</div>

上中下を入れ替えるとグラデーションが変わります。

グリーングラデーション
（上下が明るい）

<div style="display:inline-block; background-image:linear-gradient(#e8f8fa,#d3f2f5,#e8f8fa); border: 2px solid #d3f2f5; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで！</div>

グラデーション囲み枠の一覧はこちら

↓　↓　↓

『グラデーション囲み枠一覧』囲み枠の中でも人気のグラデーション囲み枠の一覧です。シンプル囲み枠シンプルなグラデーションなので使いやすい！『上品なピンク背景と外枠』文字数に合わせて…