DevToolBox

CSS Text Stroke ジェネレーター

テキストにストローク(縁取り)を追加するCSSを生成します。幅、色、塗りつぶしをリアルタイムでプレビューできます。

設定

プレビュー

サンプルテキスト

生成されたCSS

-webkit-text-stroke: 2px #000000;
color: #ffffff;
font-size: 72px;
font-weight: bold;

使い方

  • -webkit-text-stroke プロパティでテキストに縁取りを追加できます
  • • ストローク幅と色を調整して、好みのスタイルを作成
  • • 塗りつぶしを無効にすると、アウトラインのみのテキストになります
  • • 太字フォントを使うと、ストローク効果がより明確になります
  • • Chrome、Safari、Edge、Firefoxなど主要ブラウザで動作します