All Tools
Design
CSS Checkered Pattern Generator

CSS Checkered Pattern Generator

Generate a checkered background pattern with CSS.

Type

Pattern 1Pattern 2Pattern 3

Base color (#e8f9fa)

Pattern color (#06c0cc)

Size (10px)

background-color: #e8f9fa;
background-image: linear-gradient(45deg, #06c0cc 25%, transparent 25%, transparent 75%, #06c0cc 75%),linear-gradient(45deg, #06c0cc 25%, transparent 25%, transparent 75%, #06c0cc 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

Explanation

Generates three types of checkered CSS patterns in real time from background and pattern colors.

Patterns

Pattern 1	Classic checkered / checkerboard pattern
Pattern 2	Evenly spaced checks / grid pattern
Pattern 3	Gingham check pattern

Settings

Base color	Sets the base background color.
Check color	Sets the check color.
Size	Sets the check size.

Related Tools

CSS Stripe

Generate a stripe background pattern with CSS.

CSS Polka Dot

Generate a polka dot background pattern with CSS.

CSS Gradient

Generate CSS for linear and radial gradients.

CSS Shadow

Generate CSS for box shadows (outer/inner) with adjustable parameters.

Dummy Image

Generate placeholder images for mocks and wireframes.Set image size, background/text colors, and text, and get a direct-link image URL.

JSON Check

Validate JSON (and optionally JSONP) and check for syntax errors.

CodeJSONValidation

Dummy Text

Generate placeholder text for design and wireframes.Supports presets or custom text and outputs a specified character count.

HTML Entities

Encode and decode HTML entities (e.g. & ↔ &).

EncodingHTMLCode

Design CSS Code