ピンク×パープルのグラデーション背景の囲み枠

グラデーション背景の囲み枠。
写真ではないので長めになっても
キレイなグラデーションのまま伸びていきます。

• シンプル背景
• 角丸背景
• 影つき背景
• 影つき角丸背景
  があります。

背景の透け具合は
お好みで調整してくださいね。
 

グラデーション背景

見出し用

<div style="padding: 8px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);"><span style="font-weight:bold;">ここに見出し</span></div>

本文はここに入力してください。
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div>

本文はここに入力してください。　
改行はShift+Enterで！

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFE0EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div>

本文はここに入力してください。　
改行はShift+Enterで！

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div>

角丸グラデーション背景

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div>

本文はここに入力してください。　
改行はShift+Enterで！

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFE0EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div>

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div>

影つきグラデーション背景

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFE0EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div>

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div>

影つき角丸グラデーション背景

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #FFE0EA;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div>

本文はここに入力してください。　
改行はShift+Enterで！


 

<div style="padding:20px;background-image: linear-gradient(-45deg, #E3D1EF, #FFE9F0);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #DFC69B;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div>

『グリーン×ブルーのグラデーション背景の囲み枠』

『オレンジ×グリーンのグラデーション背景の囲み枠』

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってね

ID検索は @570smkow 

୨୧ アメブロで使える囲み枠一覧
୨୧ 囲み枠　週間・月間ランキング
୨୧ 囲み枠の便利な情報
୨୧ アメブロ設定ポイント10選
୨୧ Canvaのおすすめ情報

デザインとブログアドバイスで 起業女性をサポートしています。

◆ あなたの魅力があふれるブログに⇒ アメブロカスタマイズ

◆ 書きやすく伝わりやすいブログに⇒ ブログ診断

◆ ランディングページやホームページの制作もしています。

お問合せ⇒お問合せフォーム