cssで蛍光ペン風のマーカーを引く

こんにちは，むぎやんです．

実際の蛍光ペンで線を引くと，引き始めと引き終わりがちょっと濃くなりますよね．あれを再現したくてcssで作ってみました．

サンプル

見た目は↓な感じになります．線の色や太さも変更可能です．

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

サンプルコード

こんな感じのcssです（"検討がつかぬ"の部分のコードです）．

background-image:
    linear-gradient(90deg, hsla(330, 100%, 50%, .3) 3px, hsla(0, 100%, 100%, 0) 10px)
  , linear-gradient(90deg, hsla(330, 100%, 50%, .5), hsla(330, 100%, 60%, .5))
  , linear-gradient(270deg, hsla(330, 100%, 50%, .5) 5px, hsla(0, 100%, 100%, 0) 10px);
background-position: 0 100%, 0 100%, 0 100%;
background-size: 100% 30%, 100% 30%, 100% 30%;
background-repeat: no-repeat;
padding: .25em;

線の色を変える

hslaの"h"の値を変えると線の色が変わります．

/* マゼンタ */
background-image:
    linear-gradient(90deg, hsla(300, 100%, 50%, .3) 3px, hsla(0, 100%, 100%, 0) 10px)
  , linear-gradient(90deg, hsla(300, 100%, 50%, .5), hsla(300, 100%, 60%, .5))
  , linear-gradient(270deg, hsla(300, 100%, 50%, .5) 5px, hsla(0, 100%, 100%, 0) 10px);

線の太さを変える

background-sizeの高さの値を変えると線の太さが変わります．

/* 細字 */
background-size: 100% 3px, 100% 3px, 100% 3px;
/* 中字 */
background-size: 100% 30%, 100% 30%, 100% 30%;
/* 太字 */
background-size: 100% 100%, 100% 100%, 100% 100%;