マーカー・蛍光ペンCSSジェネレーター

テキストをマーカーや蛍光ペン風にハイライトするCSSコードを生成します。
マーカーの位置や太さをカスタマイズ可能。グラデーション色にも対応しています。
出力されるCSSコードをコピペで簡単に使えます。

スポンサーリンク

カスタマイズ

テキスト設定

px

px

マーカー設定


※1emを大きく超える場合、Y方向Paddingを増やす必要があります。

em
= 8px

▼ Padding

em
= 0px
em
= 0px

em
= 0px

▼ マーカーの色

詳細設定

CSSコード

.highlight {
  background-image: linear-gradient(0deg, #fbbf2480 0.5em, transparent 0.5em);
}

使用上の注意

  • インライン要素にスタイルを当てることを想定しています。
  • 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。

\ Share on SNS /

スポンサーリンク

ツール一覧

CSSジェネレーター

UIパーツジェネレーター

HTML変換ツール