Paste your CSS code here
CSS with prefixes added or removed
CSS browser vendor prefixes are experimental markers added by browser vendors before a standard property is officially released, such as -webkit-, -moz-, -ms-, and -o-. These prefixes allow developers to use new features before they are standardized, while giving browser vendors a safe way to test and iterate. For example, -webkit-transform and -moz-border-radius are prefixed versions of standard properties.
The following properties may require vendor prefixes depending on browser versions:
While modern build tools like PostCSS with Autoprefixer can handle CSS prefixes automatically, an online tool is invaluable in several scenarios: quickly testing compatibility of a specific property, working on simple projects without a build pipeline, processing CSS on the fly, or cleaning up legacy code. This tool runs entirely in your browser with no dependencies required.
Using the CSS Autoprefixer is straightforward. Here is a detailed guide:
Add Prefixes Mode: Paste your CSS code into the left input area, select the appropriate target browser range, enable the add prefixes option, and click the process button. The tool scans your CSS and inserts the necessary vendor-prefixed versions where needed. For example, display: flex will automatically expand to include -webkit-box, -webkit-flex, -moz-flex, -ms-flexbox, and the standard flex declaration.
Remove Prefixes Mode: If you need to clean up outdated prefixes from legacy code, enable the remove prefixes option. The tool will automatically strip all lines starting with -webkit-, -moz-, -ms-, or -o-, keeping only standard properties. This is especially useful when upgrading a project to support only modern browsers.
Minify Output: When the minify option is enabled, the tool removes all unnecessary whitespace and line breaks, producing a single compact line of CSS. This is ideal for production deployments where every byte counts. Keep it disabled during development for easier debugging.
The CSS Autoprefixer tool is valuable across many development scenarios. For rapid prototyping, when you need to quickly test how a CSS property behaves across different browsers, simply paste your code and instantly see the fully compatible version without configuring complex build environments.
For legacy project maintenance, many older projects still use manually added prefixes, resulting in redundant and outdated code. Use the remove-prefix mode to strip unnecessary prefixes, then re-run in add-prefix mode to generate the minimal set required for your current target browsers.
For teaching and learning, the tool helps front-end beginners understand how CSS vendor prefixes work in practice. By comparing input and output, learners can clearly see which properties need prefixes, which prefixes are required, and how they affect cross-browser compatibility.
Can I Use Database: The authoritative source for CSS compatibility data is caniuse.com, which meticulously documents browser support for each CSS feature. This tool's prefix rules are based on common patterns from that database, covering over 90% of typical development scenarios.
PostCSS Autoprefixer: In production environments, the recommended approach is PostCSS's Autoprefixer plugin. It calculates exactly which prefixes are needed based on your configured browser support list (via browserslist), adding only the necessary ones. However, Autoprefixer requires a Node.js build environment, making this online tool a great alternative for simple or temporary needs.
CSS @supports Rule: Beyond prefixes, modern CSS offers the @supports rule, allowing developers to write conditional styles based on whether a browser supports a particular feature. This is more reliable than relying solely on prefixes because feature detection reflects actual browser capabilities rather than version-based assumptions.
CSS browser vendor prefixes are experimental markers added by browser vendors before a standard property is officially released, such as -webkit-, -moz-, -ms-, and -o-. Modern browsers natively support most properties, but prefixes are still needed for backward compatibility with older browser versions.
Common properties include Flexbox (display:flex), Grid (display:grid), transform, transition, animation, box-shadow, border-radius, linear-gradient, user-select, appearance, and backdrop-filter. The specific prefixes needed depend on your target browser versions.
Yes. The tool provides both add-prefix and remove-prefix modes. When remove-prefix mode is selected, it automatically strips all lines starting with -webkit-, -moz-, -ms-, or -o-, keeping only standard properties.
100% safe. The tool runs entirely in your browser. CSS code is never uploaded to any server. All processing logic is implemented in pure JavaScript.
Yes. The tool provides a minify option that removes unnecessary whitespace and line breaks, generating more compact CSS code suitable for production use.
The Modern option adds minimal prefixes for newer browsers. The Standard option covers Chrome 60+, Firefox 60+, Safari 12+, and IE 11. The Legacy option adds the most comprehensive set of prefixes for maximum compatibility with older browsers.