CSSでテキストを蛍光ペンでマークした感じにする

CSSを使って、蛍光ペンでテキストをマークしたような感じにするデザインを紹介します。テキストの一部分を強調したいときなどに使ったりする表現方法の1つではないでしょうか。

蛍光ペンマーカーの作り方

蛍光ペンで線を引いた感じにするには、backgroundプロパティを使ってグラデーションをかけることで表現することができます。単純に背景色を重ねるだけでも良いのですが、グラデーションをかけた方が、よりマーカーの雰囲気が出せます。

.marker {
  background: linear-gradient(transparent 50%, #ff00ee 80%);
}

このように、linear-gradientで線形グラデーションをかけることで、何となくですが蛍光ペンでマークしたような雰囲気になります。色やグラデーションの間隔はお好みで調整してください。

簡単ではありますが、以上がCSSを使って蛍光ペンマーカーをデザインする方法となります。