直感的な操作でストライプ背景を作成できるツールです。
色・幅・透明度・角度を調整しながら、そのまま使えるコードをコピーできます。
このツールは … 回使われています。
background: repeating-linear-gradient(90deg, ...);
×
px
Presets
Stripes
CSSコードの使い方
コピーしたコードを、背景を付けたい要素の CSS にそのまま貼り付けて使えます。
例: ボタン背景に適用する場合
.my-button { /* 生成したコードを貼り付け */ background: repeating-linear-gradient(90deg, #111827 0 16px, #f9fafb 16px 32px); /* そのほかのスタイル */ color: #111827; border: none; font-family: inherit; }
`background-image` に切り替えてコピーすることもできます。
repeating-linear-gradient の仕組み
生成されるコードは
repeating-linear-gradient(角度, 色1 開始位置 終了位置, 色2 ...)
という形をしています。各帯を「色・開始px・終了px」で指定し、最後の停止位置までを1セットとして繰り返すことでストライプ模様になります。
コードの読み方
background: repeating-linear-gradient(90deg, #111827 0 16px, #f9fafb 16px 32px);
- 90deg … ストライプの向き。0deg は下から上、90deg は左から右へ色が並びます。
- #111827 0 16px … 0px から 16px までを濃い色で塗ります。
- #f9fafb 16px 32px … 16px から 32px までを白系で塗り、32px ごとに先頭へ戻って繰り返します。
数値を小さくすると密なストライプ、大きくすると太いストライプになります。上部の Scale は、この数値をまとめて拡大・縮小する調整です。
ストライプ生成のコツ
幅に差をつける
太い帯と細い帯を混ぜると、単純なボーダーよりも表情のある背景になります。
太い帯と細い帯を混ぜると、単純なボーダーよりも表情のある背景になります。
角度で印象を変える
90deg は縦ストライプ、180deg は横ストライプ、45deg 前後は動きのある演出に向いています。
90deg は縦ストライプ、180deg は横ストライプ、45deg 前後は動きのある演出に向いています。
透明度も活用する
一部の帯だけ透明度を下げると、下地色や写真に重ねたときのなじみが良くなります。
一部の帯だけ透明度を下げると、下地色や写真に重ねたときのなじみが良くなります。