Plaid & Checkerboard Background CSS Generator

Generates CSS code to create a plaid and checkerboard background.
The size, color, and spacing can be freely customized.
The output CSS code can be easily used by copy and paste.

Sponsored Links

Customization

▼ Type

px

px

▼ Shift the starting position of the background

px
px

Additional Setting

CSS Code

.plaid {
  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;
}

Notes

  • It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators