Home›Validators›Data›CSS Property Validator

CSS Property Validator

Data

Validate CSS property names against the official W3C/MDN list. Identifies property category and browser support tier. Free, in-browser, no data stored.

Reviewed by the thecalcu.com team · Last updated July 1, 2026

What is a CSS Property?

A CSS Property Validator checks whether a CSS property name is a recognised, standard property defined in W3C CSS specifications. When you type background-color, display, or grid-template-columns, the tool confirms that name exists in the authoritative property list, identifies its functional category (Layout, Typography, Flexbox, and so on), and notes whether it is a vendor-prefixed or custom property.

This tool solves a specific everyday problem: CSS property names are long, hyphenated, and easy to misspell. A typo like backgroun-color or dispaly produces no browser error, the declaration is silently ignored. Browsers do not raise exceptions for unknown property names; they simply skip the rule. That silent failure makes name errors harder to catch than syntax errors in most other languages.

The validator covers three distinct cases:

  • Standard properties, checked against the W3C/MDN property list and assigned a functional category
  • Vendor-prefixed properties, names starting with -webkit-, -moz-, -ms-, or -o- are detected and noted separately; use the unprefixed standard form where possible
  • Custom properties, names starting with -- (such as --brand-blue) are valid by CSS specification and are recognised as custom properties; no further name checking applies

Validation runs entirely in your browser. No input is transmitted to any server. For related checks, see the HTML Validator and the URL Validator.

Why Use a CSS Property Validator?

Browsers are designed to be fault-tolerant. An unknown CSS property is silently dropped, no console warning, no visible error, no indication that the rule was ignored. A developer who misspells transition as transistion will not know about it until they notice the animation is absent and start debugging. That debugging cycle is the cost this tool eliminates.

Specific scenarios where this check saves time:

  • Confirming the exact spelling of a rarely used property before writing a rule (for example, text-underline-offset or scroll-snap-align)
  • Checking whether a vendor-prefixed property you have seen in legacy code has a standard equivalent
  • Verifying that a custom property name follows the -- convention required for CSS variables
  • Teaching or reviewing CSS, a quick lookup confirms whether a property a student wrote is real
  • Auditing copied CSS from documentation or AI-generated code before incorporating it into a stylesheet

Who Should Use This Validator?

Frontend developers and web designers who write CSS by hand and want an immediate check on a property name before consulting full MDN documentation.

Learners and students encountering unfamiliar CSS properties and wanting to confirm they exist and understand their functional area without reading through a full specification.

Code reviewers checking CSS contributions or auto-generated stylesheets for obviously invalid property names before deeper review.

Developers working with CSS-in-JS who need to verify the correct CSS hyphenated form of a property name before using it in a JavaScript context.

For full stylesheet quality, value correctness, ordering conventions, and specificity, pair this tool with a dedicated CSS linter. For checking related data formats, the HTML Meta Validator checks the meta tags inside an HTML document's <head>.

What Insights Does the CSS Property Validator Give You?

When the property name is valid, the tool returns:

  • A green Valid badge
  • The functional category, one of: Layout, Typography, Box Model, Background & Colour, Flexbox, Grid, Animation & Transition, Transform, or Other
  • For custom properties (--*): a note that the name is a valid custom property by CSS specification
  • For vendor-prefixed properties: the detected prefix and a note to prefer the standard unprefixed form

When the property name is invalid, the tool returns:

  • A red Invalid badge
  • A note that the name was not found in the recognised property list
  • A scope reminder that this is a name-only check, browser support percentages and value validation are separate concerns

The tool does not suggest corrections for misspelled names. Check the spelling against the MDN CSS properties reference if the result is unexpected.

How to use this CSS Property calculator

  1. Open the CSS Property Validator on this page. The CSS Property Name input field is pre-filled with background-color as a working example.
  2. Clear the field and type or paste the property name you want to check, enter the name exactly as it appears in a CSS rule, in lowercase with hyphens (for example, font-size, not fontSize).
  3. The Result badge updates instantly as you type. No button press is required.
  4. If the badge shows Valid, read the category label below it to confirm the property is in the functional area you expected.
  5. If the badge shows Invalid, check for common issues: a typo, a camelCase name instead of hyphenated, a missing or extra hyphen, or a vendor prefix on a property that has a standard name.
  6. To check another property, clear the field and enter the next name. You can also share the current result by copying the URL, the property name is encoded in the page URL and will pre-fill the field for anyone you send the link to.
Show formula & methodology ↓Show less ↑

Formula & Methodology

The validator applies three checks in sequence:

1. Custom property detection

If the input starts with --, it is a CSS custom property. Custom properties are valid by CSS specification for any name following the -- prefix, no further lookup is performed, and the result is returned as valid with a custom property note.

2. Vendor prefix detection

If the input starts with -webkit-, -moz-, -ms-, or -o-, the prefix is recorded. The prefixed name is noted as vendor-specific rather than standard. The tool does not look it up in the standard property list.

3. Known-property lookup

For all other inputs, the name is normalised to lowercase and looked up in the bundled property list derived from the W3C CSS specification and MDN documentation. If a match is found, the associated functional category is returned and the result is valid. If no match is found, the result is invalid.

Valid example, background-color

background-color does not start with -- or a vendor prefix. Lookup finds it in the known-property list under the Background & Colour category. Result: Valid, Background & Colour.

Invalid example, backgroun-color (typo)

backgroun-color does not start with -- or a vendor prefix. Lookup finds no match in the known-property list, the name is missing the d. Result: Invalid, not a recognised CSS property.

The property list is bundled at build time and does not make network requests. Validation is synchronous and runs in under one millisecond for any input length. For checking the structural integrity of a complete HTML document rather than a CSS property name, use the HTML Validator.

Frequently Asked Questions

What does the CSS Property Validator check?
The tool checks whether the name you enter matches a known, standardised CSS property from the W3C/MDN property list. It returns whether the property is valid, which functional category it belongs to (such as Layout, Typography, or Flexbox), and whether it is a vendor-prefixed or custom property. It does not check the value you would assign to that property, only the property name itself.
What counts as a valid CSS property name?
A name is valid if it appears in the recognised list of standard CSS properties maintained by the W3C and documented on MDN. This includes longhand and shorthand properties (for example, `border` and `border-top-color`), as well as properties introduced in modern CSS modules such as Grid and Animations. A name that is misspelled, entirely fabricated, or belongs to a proprietary non-standard extension is not valid.
Does the tool validate CSS property values?
No. This tool validates property names only. Whether a given value, such as `flex`, `1em`, or `rgba(0,0,0,0.5)`, is acceptable for a specific property is a separate concern and is not checked here. Name validation is the first step; value correctness and browser compatibility checking are independent tasks.
What is a vendor-prefixed property?
Vendor-prefixed properties are CSS properties that start with a browser-engine prefix: `-webkit-`, `-moz-`, `-ms-`, or `-o-`. These were introduced by browser vendors during the experimental phase of new CSS features before those features were standardised. Examples include `-webkit-text-stroke` and `-moz-appearance`. This tool detects the prefix and notes it, but vendor-prefixed names are not treated as standard validated properties, you should always use the unprefixed standard equivalent where it is supported.
What is a custom property?
Custom properties (also called CSS variables) are user-defined properties that start with two hyphens, such as `--primary-color` or `--spacing-unit`. They are valid CSS by specification and can hold any value, which is then referenced using `var(--property-name)`. Because any name starting with `--` is valid by definition, this tool recognises them as custom properties and returns a valid result with a note. It does not validate the name beyond the `--` prefix.
Does this tool check whether a property is supported in a specific browser?
No. This is a name-format and known-property check, not a browser compatibility audit. Whether a given property works in a target browser depends on the browser's rendering engine version, not the property name alone. For browser support data, consult the MDN compatibility tables or caniuse.com. This tool confirms the property name is correct; compatibility checking is a separate step.
Is my input sent to a server?
Nothing is sent to a server. The entire validation runs in your browser. The CSS property list is bundled with the page, and the lookup is performed locally using JavaScript. No property name, no session data, and no usage information is transmitted to any server. You can safely use this tool on private or internal property names.
Why does a property name I use every day show as invalid?
The most common reason is a typo, CSS property names use hyphens between words and are case-sensitive in some parsing contexts (though browsers normalise to lowercase). For example, `backgroundColor` (camelCase) is the JavaScript DOM style property, not a CSS property name; the CSS version is `background-color`. Check the spelling and hyphenation carefully. A second reason is that the property may be a vendor-prefixed variant rather than the standard name.
How does the tool determine the category of a CSS property?
Each property in the known-property list is tagged with a category based on its primary function: Layout (positioning, display, float), Typography (font, text, line-height), Box Model (padding, margin, border, width, height), Background & Colour, Flexbox, Grid, Animation & Transition, Transform, or Other. The category is informational, it does not affect validation. Properties that span multiple functions are assigned to their primary module.
Can I use this tool to check shorthand properties?
Yes. Shorthand properties like `background`, `border`, `margin`, `padding`, `font`, and `transition` are all in the recognised property list and will validate correctly. There is no difference in how the tool treats shorthands versus longhands, both are checked against the same list.
What is the difference between this validator and a CSS linter?
A CSS linter (such as Stylelint) analyses a complete CSS file or ruleset, checking property names, value correctness, specificity issues, ordering conventions, and code style rules. This tool validates a single property name in isolation. It is useful for a quick spot-check when you are unsure of the exact spelling of a property name, or to confirm a property exists before you look up its syntax. For full stylesheet quality checks, use a dedicated CSS linter.
Does this tool work for CSS in JavaScript (CSS-in-JS)?
This tool validates standard CSS property names as they appear in a stylesheet, using hyphen notation (for example, `font-size`). CSS-in-JS libraries like styled-components or Emotion accept both the CSS hyphenated form and the JavaScript camelCase form (such as `fontSize`). This tool validates only the CSS form. If you are working in a CSS-in-JS context, convert camelCase to hyphenated form before checking here.
Also known as
CSS property checkvalid CSS propertyCSS property name validatorcheck CSS propertyCSS style validator