直感的な操作で CSS ストライプ背景を作成できるツールです。
色・幅・透明度・角度を調整しながら、そのまま使えるコードをコピーできます。
このツールは … 回使われています。
background: repeating-linear-gradient(90deg, ...);
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` に切り替えてコピーすることもできます。
ストライプ生成のコツ
幅に差をつける
太い帯と細い帯を混ぜると、単純なボーダーよりも表情のある背景になります。
太い帯と細い帯を混ぜると、単純なボーダーよりも表情のある背景になります。
角度で印象を変える
90deg は縦ストライプ、180deg は横ストライプ、45deg 前後は動きのある演出に向いています。
90deg は縦ストライプ、180deg は横ストライプ、45deg 前後は動きのある演出に向いています。
透明度も活用する
一部の帯だけ透明度を下げると、下地色や写真に重ねたときのなじみが良くなります。
一部の帯だけ透明度を下げると、下地色や写真に重ねたときのなじみが良くなります。