CSS Prefixer
Automatically add vendor prefixes to your CSS
Input CSS
Prefixed CSS
CSS Prefixing Examples
Vendor prefixes ensure cross-browser support. Example:
Flexbox and transforms
Input (no prefixes):
Prefixed output:
Use Sample above to load more example data.
What Is a CSS Prefixer?
Browsers sometimes implement CSS features with vendor prefixes before they're standardized: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (legacy IE/Edge). A CSS prefixer adds these prefixes automatically so your styles work across browsers. The W3C CSS specifications define the language; Can I Use tracks browser support.
This tool parses your CSS and adds vendor prefixes where needed. It runs entirely in your browser. Nothing is sent to a server. Modern browsers need fewer prefixes than before, but some properties (e.g. user-select, display: flex in older Safari) still benefit. For formatting, use the CSS Formatter. For minifying, use the CSS Minifier.
How to Use This Tool
Paste or Upload CSS
Copy your CSS and paste it into the left editor. You can also click Upload to load a .css file. The Sample button loads example data. Invalid CSS will show an error.
View the Prefixed Output
The right panel shows CSS with vendor prefixes added. Properties like display: flex, user-select, and transform get the appropriate prefixes for older browsers.
Copy or Download
Use Copy or Download. For SCSS or Less, compile first with SCSS to CSS or Less to CSS, then prefix. For validation, use the CSS Validator.
When CSS Prefixing Helps
When supporting older browsers (Safari, older Chrome, legacy IE) or using newer CSS features that aren't fully standardized, prefixing ensures compatibility. Build tools like Autoprefixer or PostCSS often handle this in production, but this tool is useful for one-off files, quick checks, or when a build step isn't available.
Email CSS, embedded styles, or CDN-hosted CSS may need manual prefixing. Running your stylesheet through here gives you browser-ready output. For converting to inline styles (e.g. for email), use CSS to Inline after prefixing.
Frequently Asked Questions
Do I still need prefixes in 2024?
Many properties now have unprefixed support. For older Safari, iOS, or legacy browsers, some properties (e.g. -webkit-backdrop-filter) still need prefixes. Check Can I Use for your target browsers.
Is my data private?
Yes. Prefixing runs entirely in your browser. No data is sent to any server.
Why use this instead of Autoprefixer?
Autoprefixer runs in a build pipeline. This tool runs in the browser—no Node.js or build step. Use it for quick checks, one-off files, or when you can't run a build.
Does it support all properties?
The tool adds prefixes for common properties. For comprehensive coverage, use Autoprefixer with your build. For most use cases, this tool covers the essentials.
What about @keyframes?
Keyframe names may need prefixes in some contexts. The tool handles common cases. For complex animations, verify in your target browsers.
Related Tools
For the CSS specification, see W3C CSS. MDN CSS is the reference. Can I Use tracks browser support. Autoprefixer for build pipelines.