CSS Validator

About the CSS Validator playground

The CSS Validator checks your stylesheets for syntax errors, unknown properties, invalid values, and malformed rules. Paste your CSS and the tool parses it in your browser, pointing out problems such as missing semicolons, unbalanced braces, misspelled property names, and values that don't match a property's expected type. Catching these issues early prevents styles from silently failing, where a single bad declaration causes a browser to skip the rest of a rule and leaves your layout looking broken.

CSS validation verifies that style rules follow the grammar defined by the W3C CSS specifications. Each rule consists of selectors and a declaration block of property/value pairs, and validators confirm that property names exist, values are well-formed, and the overall structure is correct. Because browsers ignore declarations they cannot parse without raising visible errors, invalid CSS can fail quietly. Validation surfaces those silent failures so you can fix typos and incorrect values rather than hunting for why a style isn't applying.

HostedCSS Validator runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

Valid CSS rule

.card {
  display: flex;
  padding: 16px;
  color: #333;
}

Result: No errors. All properties and values are valid.

Invalid: missing semicolon

.btn {
  color: red
  background: blue;
}

Result: Error — the declaration "color: red" is missing a semicolon, causing the parser to merge it with the next line.

Invalid: unknown property

.box {
  colour: green;
}

Result: Error — "colour" is not a recognized property (the correct spelling is "color").

Invalid: bad value

.item {
  width: 100pixels;
}

Result: Error — "100pixels" is not a valid length; use a valid unit such as "100px" or "100%".

Invalid: unbalanced braces

.nav {
  margin: 0;
  padding: 0;

Result: Error — the rule block is never closed; a matching "}" is missing.

Valid: media query and variables

:root {
  --gap: 8px;
}
@media (max-width: 600px) {
  .row { gap: var(--gap); }
}

Result: No errors. Custom properties and the @media at-rule are valid CSS.

Invalid: missing unit on length

.hero {
  margin-top: 20;
}

Result: Error — a nonzero length needs a unit; use "20px" (only 0 may be unitless).

Valid: grid, transition, calc

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1rem + 4px);
  transition: opacity 0.3s ease-in-out;
}

Result: No errors. The grid, calc(), and transition shorthand values are all valid.

Invalid: bad hex color

.tag {
  color: #12345;
}

Result: Error — a hex color needs 3, 4, 6, or 8 digits; "#12345" has 5 and is invalid.

Input

Issues

No input to validate

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection