CSS Autoprefixer
PostCSS Autoprefixer · Browserslist targets

Input CSS

419 bytes

Prefixed Output

waiting

Related Tools

See all ->
CSS Minifier / BeautifierMinify & format CSSCSS → TailwindConvert CSS to utilitiesTailwind → CSSExpand utilities to CSSTailwind FormatterSort & group classesCSS Grid BuilderVisual grid layout editorFlexbox BuilderVisual layout editorMedia Queries GeneratorCSS · SCSS · Tailwind · JSResponsive PreviewTest any screen size

CSS Autoprefixer Online - Add Vendor Prefixes

Use PostCSS Autoprefixer with Browserslist targets, rejected browsers, grid/flexbox settings, copy, and download.

Updated May 17, 2026
Share & Support

Features

Run real PostCSS Autoprefixer in the browser without installing Node.js or configuring a build step.
Choose browser support from practical presets: Defaults, Modern evergreen, Broad support, Enterprise support, Mobile, or Custom.
Reject browsers with line-by-line exclusion queries such as IE <= 11, Opera Mini, or old Android Browser.
Preview the resolved Browserslist output so you can see exactly which browsers drive prefix decisions.
Generate -webkit-, -moz-, and -ms- CSS prefixes only when your selected browser targets require them.
Control CSS Grid prefixing with disabled, autoplace, or no-autoplace modes for older Microsoft grid syntax.
Control Flexbox prefixing, including no-2009 mode for avoiding very old Flexbox syntax.
Remove outdated prefixes automatically or preserve existing prefixes when auditing legacy CSS.
Copy output to the clipboard or download autoprefixed.css for use in a project.
Process CSS locally in your browser with no upload, no account, and no server-side storage.

About this tool

This CSS Autoprefixer tool adds vendor prefixes to CSS using the same PostCSS Autoprefixer engine developers use in production build pipelines. Paste CSS, choose a browser support target, reject browsers you no longer support, and generate prefixed CSS that matches your compatibility requirements. It is built for searches like CSS autoprefixer online, add vendor prefixes to CSS, PostCSS Autoprefixer browser targets, and Browserslist CSS prefixes.

Vendor prefixes exist because browser engines sometimes shipped CSS features behind engine-specific names before the final standard stabilized. A property like user-select, appearance, backdrop-filter, mask-image, Flexbox, or older Grid support may need -webkit-, -moz-, or -ms- forms depending on which browsers you support. Writing those rules by hand is tedious and error-prone. Autoprefixer solves the problem by reading your CSS, checking Can I Use data through Browserslist, and adding only the prefixes required by the target browsers.

The important part is browser targeting. A website that only supports current Chrome, Safari, Firefox, and Edge needs fewer prefixes than an enterprise dashboard that still supports older Safari or corporate-managed Edge versions. This tool exposes that targeting directly. Pick Defaults, Modern evergreen, Broad support, Enterprise support, Mobile browsers, or Custom query. Then use the Reject browsers box to exclude targets such as IE 11, Opera Mini, or any browser family your project has officially dropped.

Advanced settings match real Autoprefixer options. Remove outdated prefixes cleans up prefixes no longer needed for your selected targets. Cascade aligned prefixes formats prefixed declarations in the old aligned style. CSS Grid controls whether older Microsoft grid prefixes are generated, including an autoplace mode. Flexbox controls whether older Flexbox syntax is generated. After processing, copy the output, download it as CSS, or run it through CSS Minifier & Beautifier before deploying. If you are converting a snippet into utility classes, use CSS to Tailwind after prefixing or cleanup.

How to Use

  1. 1
    Paste your CSSPaste a stylesheet, component CSS, CMS snippet, or design-system rule set into the input editor. The sample includes Flexbox, Grid, user-select, appearance, mask-image, and backdrop-filter so you can see how the output changes with different browser targets.
  2. 2
    Choose target browsersSelect a preset or switch to Custom query. Autoprefixer uses Browserslist syntax, so queries like defaults, last 2 versions, > 0.5%, Firefox ESR, and not dead work as expected. The resolved browser preview updates immediately.
  3. 3
    Reject browsers you do not supportEnter excluded browser queries in the Reject browsers field. For example, use ie <= 11 or op_mini all when your project has dropped those targets. The tool converts each line into a not ... Browserslist rule before prefixing.
  4. 4
    Adjust prefix behaviorChoose the CSS Grid mode, Flexbox mode, whether outdated prefixes should be removed, and whether prefixed declarations should be cascade-aligned. These settings mirror common Autoprefixer configuration options from build tools.
  5. 5
    Generate and exportClick Autoprefix CSS, review warnings if Autoprefixer reports any, then copy or download the output. For production delivery, minify the result with CSS Minifier & Beautifier.

Common Use Cases

Add vendor prefixes to CSS from a tutorial or code snippet
Code examples often show modern CSS without prefixes. Paste the snippet, choose your project browser support, and generate the prefixed CSS before dropping it into a production page or CMS field.
Target Safari and mobile browsers accurately
Safari and mobile browser support often drives prefixes for appearance, masks, filters, and newer CSS features. Use the Mobile preset or custom iOS/Safari queries to generate prefixes for mobile-heavy audiences.
Drop unsupported browsers deliberately
When a project officially stops supporting IE 11, old Android Browser, or Opera Mini, add those lines to Reject browsers. The resolved list makes the decision visible instead of hiding it in a build config.
Prototype without configuring PostCSS
When you need prefixed CSS quickly but do not want to set up Vite, webpack, PostCSS, or package scripts, this browser tool gives you Autoprefixer output immediately. Later you can move the same Browserslist query into your project.
Clean up legacy prefixed CSS
Enable Remove outdated prefixes and target modern browsers to remove old prefixes that no longer matter. Then send the cleaned output to CSS Minifier & Beautifier for formatting or compression.
Audit browser support before a CSS migration
Paste old component CSS, test several Browserslist presets, and compare how many prefixes remain. This helps teams decide whether they can simplify stylesheets before migrating to a new design system or Tailwind workflow.

Frequently Asked Questions

Paste your CSS into the input editor, choose a Browserslist preset or custom browser query, optionally reject specific browsers, and click Autoprefix CSS. The tool runs PostCSS Autoprefixer in your browser and outputs CSS with the vendor prefixes required by your selected browser support target.

Browserslist is the query format used by Autoprefixer, Babel, Stylelint, and many build tools to describe browser support. Queries such as defaults, last 2 versions, > 0.5%, not dead, or not ie <= 11 are resolved into a concrete browser list. Autoprefixer uses that resolved list to decide which CSS vendor prefixes are still needed.

Yes. Use the Reject browsers box to enter one browser query per line, such as ie <= 11 or op_mini all. The tool converts those entries to not rules and combines them with your selected preset or custom Browserslist query before running Autoprefixer.

For most modern websites, start with defaults or the Modern evergreen preset. If your audience includes older corporate desktops, older Safari versions, or long-tail browser usage, use Broad support or Enterprise support. If you already have project requirements, switch to Custom query and paste the same Browserslist rules you use in package.json or .browserslistrc.

The grid setting controls Autoprefixer support for older Microsoft grid syntax. Disable grid prefixes if you only support modern browsers. Enable grid autoplace when you want Autoprefixer to add prefixed grid output for layouts that can be translated safely. The no-autoplace mode is more conservative when automatic placement would be risky.

Yes, if Remove outdated prefixes is enabled. Autoprefixer removes prefixes that are unnecessary for your selected browser targets and keeps the ones that are still needed. Turn this option off if you want to preserve legacy prefixes exactly as they appear in the input.

Yes. The tool uses PostCSS with the Autoprefixer package and Browserslist queries. It is meant for quick browser-based work, code snippets, CMS styles, prototypes, and debugging. For production projects, you can copy the same Browserslist query into your package.json or .browserslistrc file.

No. CSS processing runs in your browser. Your stylesheet, browser targets, and generated output are not uploaded to a server. You can safely use the tool for client CSS, private component styles, design-system snippets, and proprietary code.