CSS Validator Free Online Tool 2026

Last updated March 22, 2026

CSS Validator Examples

The CSS Validator checks your CSS for syntax errors, invalid values, deprecated properties, and browser compatibility issues. Below are examples of common CSS errors and their fixes.

Valid CSS — No Errors

.card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

Validator result: Valid CSS. No errors found.

Misspelled Property Name

.box {
  backgrond-color: #3b82f6;   /* ERROR: typo */
  colour: white;               /* ERROR: British spelling not valid */
  font-wieght: bold;           /* ERROR: typo */
}

Validator output:

Line 2: Unknown property "backgrond-color". Did you mean "background-color"?
Line 3: Unknown property "colour". Did you mean "color"?
Line 4: Unknown property "font-wieght". Did you mean "font-weight"?

Fixed:

.box {
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
}

Invalid Value

.text {
  font-size: large px;     /* ERROR: invalid value */
  margin: 10;              /* ERROR: missing unit */
  opacity: 1.5;            /* ERROR: opacity must be 0–1 */
  z-index: auto px;        /* ERROR: invalid value */
}

Validator output:

Line 2: Invalid value "large px" for property "font-size".
Line 3: Missing unit for value "10". Use "10px", "10em", "10rem", etc.
        (Exception: 0 does not require a unit)
Line 4: Value "1.5" is out of range for "opacity". Must be between 0 and 1.
Line 5: Invalid value "auto px" for property "z-index".

Unclosed Rule Block

.header {
  background: #1e3a8a;
  color: white;
  padding: 20px;
  /* missing closing brace */

.nav {
  display: flex;
}

Validator output:

Line 7: Unexpected token ".nav". Expected "}" to close rule started at line 1.
        All rules after line 1 may be parsed incorrectly.

Deprecated Properties

.element {
  zoom: 1.5;                    /* WARNING: non-standard */
  -webkit-border-radius: 8px;   /* WARNING: prefix no longer needed */
  -moz-border-radius: 8px;      /* WARNING: prefix no longer needed */
  border-radius: 8px;           /* OK */
}

Validator output:

Line 2: "zoom" is not a standard CSS property. Use "transform: scale()" instead.
Line 3: "-webkit-border-radius" prefix is no longer needed for modern browsers.
Line 4: "-moz-border-radius" prefix is no longer needed for modern browsers.

Invalid Selector

div > > p { color: red; }    /* ERROR: double combinator */
.class..name { color: blue; } /* ERROR: double dot */
#id#id { color: green; }      /* WARNING: duplicate ID */

Validator output:

Line 1: Invalid selector "div > > p". Consecutive combinators are not allowed.
Line 2: Invalid selector ".class..name". Double dot is not valid.
Line 3: Warning — selector "#id#id" matches the same element twice.

CSS Custom Property Issues

:root {
  --primary: #3b82f6;
}

.btn {
  background-color: var(primary);       /* ERROR: missing -- */
  color: var(--text, );                 /* ERROR: empty fallback */
  border: var(--border-width) solid;    /* OK */
}

Validator output:

Line 6: Invalid var() reference "primary". Custom properties must start with "--".
        Did you mean "var(--primary)"?
Line 7: Empty fallback value in var(--text, ). Provide a valid fallback or remove the comma.

Accessibility Warning

.sr-only-wrong {
  display: none;        /* WARNING: hidden from screen readers too */
}

/* Correct visually-hidden technique */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Common Use Cases

• Catching typos in property names before deployment
• Identifying missing units on numeric values
• Removing unnecessary vendor prefixes from legacy CSS
• Finding unclosed brackets that break entire stylesheets
• Auditing CSS for deprecated properties and non-standard values
• Validating CSS as part of a CI/CD pipeline or pre-commit hook

Paste your CSS to get an instant validation report with line numbers, error descriptions, and suggested fixes for every issue found.