フェードアウトする下線付きテキストのCSS作成ツール
見出しテキストの下線が途中からグラデーションで透明に消えていくスタイルを作成するCSSジェネレーターです。
プレビュー
<h2 class="fadeout-underline">{{text}}</h2>.fadeout-underline {
color: {{text_color}};
font-size: {{size}}px;
border-bottom: {{border_width}}px solid;
border-image: linear-gradient(to right, {{color}} 0% {{solid_width}}%, transparent 100%);
border-image-slice: 1;
}機能・使い方
- 下線が途中から透明にフェードアウトする見出しデザインを作成します。
border-imageプロパティを使用しているため、複雑なHTML構造（空のspanタグなど）は不要です。- 「色が維持される範囲」を調整することで、フェードアウトの開始位置を変更できます。
- 色はカラーピッカーまたはカラーコード入力で指定できます。
CSSプロパティの説明
下線を表示するためにborder-bottomを使っていますが、フェードアウト効果を出すためにborder-imageとlinear-gradient（線形グラデーション）を組み合わせています。
border-image-slice: 1を指定することで、グラデーション画像をボーダー領域全体に引き伸ばして適用させています。
