Webspe Tools

チェック柄CSSジェネレーター

格子模様やチェック柄、チェッカーボード柄のBackgroundを作成するためのCSSコードを生成します。
サイズや色、間隔を自由にカスタマイズ可能です。
出力されるCSSコードをコピペで簡単に使えます。

スポンサーリンク

カスタマイズ

▼ タイプ

px

px

▼ 背景の開始位置

px
px

CSSコード

background-color: #ffffff;
background-image: linear-gradient(90deg, #0769D580 20px, transparent 20px), linear-gradient(#0769D580 20px, transparent 20px);
background-position: 10px 10px;
background-size: 40px 40px;

使用上の注意

  • モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
  • 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。

\ SNSでシェア /

スポンサーリンク

関連ツール