ブログ記事内で使えるカスタマイズ。グラデーションを使った枠

ブログ記事内で使えるグラデーション「枠」の紹介です。

　
ブログご訪問ありがとうございます。
営業とネット集客に強い個人事業主向けビジネス心理コンサルタント漆沢英一です。

自然のグラデーションが美しい仙台の朝焼けの写真です。

グラデーションを使った枠

最近、背景画像にグラデーションを重ねているサイトをよく見かけます。

また、ボタンや写真にもグラデーションをかけているサイトもあります。

色々効果的に使えるグラデーションの中で、今回はブログ記事内で使えるグラデーション「枠」のご紹介です。

最新エディタの方は、HTML表示にして張り付けてお使いください。

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#1E00FF,#05FBFF); background: -webkit-linear-gradient(#1E00FF,#05FBFF); background: linear-gradient(to right,  #1E00FF,#05FBFF);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#78ffd6, #a8ff78); background: -webkit-linear-gradient(#78ffd6, #a8ff78); background: linear-gradient(to right, #78ffd6, #a8ff78);color: #000;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#ff708d,#ffb03c); background: -webkit-linear-gradient(#ff708d,#ffb03c); background: linear-gradient(to right, #ff708d,#ffb03c);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#E4A972, #9941D8); background: -webkit-linear-gradient(#E4A972, #9941D8); background: linear-gradient(to right, #E4A972, #9941D8);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#F2B9A1,#EA6264); background: -webkit-linear-gradient(#F2B9A1,#EA6264); background: linear-gradient(to right, #F2B9A1,#EA6264);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#00dbde, #fc00ff); background: -webkit-linear-gradient(#00dbde, #fc00ff); background: linear-gradient(to right, #00dbde, #fc00ff);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#2c3e50,#bdc3c7); background: -webkit-linear-gradient(#2c3e50,#bdc3c7); background: linear-gradient(to right, #2c3e50,#bdc3c7);color: #FFF;">本文はここから


本文はここまで</div>

本文はここから

本文はここまで

<div style="padding: 0.5em 1em; background: -moz-linear-gradient(#F7971E,#FFD200); background: -webkit-linear-gradient(#F7971E,#FFD200); background: linear-gradient(to right, #F7971E,#FFD200);color: #FFF;">本文はここから


本文はここまで</div>

▼最後までお読み頂き、ありがとうございます▼

2022年最後のブラックフライデー