handyman
Hazuu Tools

CSS Autoprefixer

Automatically add vendor prefixes (-webkit-, -moz-, -ms-) to your CSS for cross-browser compatibility.

Input CSS
Prefixed Output
Prefixed CSS will appear here...
info

About Autoprefixer

CSS Autoprefixer is a free online tool that scans your stylesheet declarations and inserts the correct vendor-prefixed copies before each property that requires them. Properties like transform, user-select, flex, animation, and backdrop-filter each need different prefix variants for different browser engines. Instead of memorising which engine needs which prefix, you paste your modern unprefixed CSS and the tool produces a ready-to-ship file with -webkit-, -moz-, and -ms- variants in place.

The tool covers more than 40 CSS properties across flexbox, transforms, transitions, animations, masking, writing modes, and more. It also handles @keyframes blocks by duplicating them as @-webkit-keyframes so that animation sequences work in older WebKit browsers without any extra steps on your part. This is particularly useful when you are targeting Safari on older iOS devices or maintaining a codebase that must support legacy browser versions alongside modern ones.

Every operation runs entirely in your browser — no CSS is uploaded, stored, or sent to a server. You can safely prefix internal design-system stylesheets, client work, or any code you would normally hesitate to paste into a third-party service. The tool is free with no sign-up required and no usage limits.

star

Key Features

check_circle

Covers 40+ CSS properties

The prefix map includes flexbox, transforms, transitions, animations, masking, user-select, clip-path, backdrop-filter, writing-mode, and more — properties that still require vendor variants for older browser targets.

check_circle

@keyframes duplication for WebKit

Animation blocks are automatically cloned as @-webkit-keyframes, so fade, slide, and scale animations work on older Safari and iOS versions without a separate manual copy.

check_circle

Prefixes inserted before the original

Each vendor-prefixed line appears immediately before the unprefixed declaration, following the correct cascade order so the standard property always takes final precedence.

check_circle

Only adds what each property actually needs

The tool applies only the prefix variants that a property genuinely requires. A property needing just -webkit- will not receive an unnecessary -ms- line, keeping output clean and accurate.

check_circle

Stats bar confirms what changed

After each run, a counter shows exactly how many prefixed declarations were added, giving you a quick sanity-check without manually diffing the output.

check_circle

Entirely client-side with no data upload

Processing happens in your browser via JavaScript. Proprietary stylesheets, unreleased design systems, and client code never leave your machine.

help

How to Use

01

Paste Your CSS

Copy your CSS code into the input editor on the left, or click "Sample" to load an example stylesheet with properties that need vendor prefixes.

02

Click Prefix

Hit the "Prefix" button to automatically add all necessary vendor prefixes. The stats bar will show how many prefixed properties were added.

03

Copy the Result

Use the copy button to grab your prefixed CSS and paste it into your project, ready for cross-browser compatibility.

code_blocks

Example

Vendor-prefixed declarations are inserted before each unprefixed property. Both user-select and transform receive the correct -webkit-, -moz-, and -ms- variants.

CSS input
.btn {
  user-select: none;
  transform: scale(1.05);
}
Prefixed CSS output
.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
lightbulb

Common Use Cases

  • arrow_circle_right

    Shipping stylesheets that must support older Safari

    Older versions of Safari on iOS and macOS require -webkit- prefixes for flexbox, transitions, and animations. Autoprefixing catches these gaps automatically so you do not have to audit every declaration by hand.

  • arrow_circle_right

    Fixing cross-browser bugs in legacy enterprise products

    Internal tools often run on a locked browser version. Paste the stylesheet from a legacy product and instantly see which unprefixed declarations may be silently ignored in that environment.

  • arrow_circle_right

    Preparing CSS before removing a build-tool pipeline

    If you are removing PostCSS or a bundler from a project and want to keep backward compatibility, run the final stylesheet through this tool to bake the prefixes directly into the output file.

  • arrow_circle_right

    Quick checks during code review

    When reviewing a pull request that adds new CSS properties, paste the changed rules here to verify no necessary prefix was overlooked before the diff lands in production.

  • arrow_circle_right

    Learning which properties still need prefixes

    The stats bar and output diff make this a useful reference tool: paste any CSS rule and see at a glance which vendor variants are still required in 2024 and which properties are safe to use unprefixed.

quiz

Frequently Asked Questions

What is Autoprefixer? expand_more
Autoprefixer is a tool that automatically adds vendor prefixes (like -webkit-, -moz-, and -ms-) to CSS properties that require them for cross-browser compatibility. It saves you from manually tracking which properties need prefixes for older browsers.
Which CSS properties get prefixed? expand_more
The tool prefixes properties commonly requiring vendor support, including flexbox properties (flex, align-items, justify-content), transforms, transitions, animations, user-select, appearance, backdrop-filter, clip-path, hyphens, and more.
Is my CSS processed on a server? expand_more
No. All prefixing happens entirely in your browser using JavaScript. Your CSS code never leaves your machine, ensuring complete privacy and zero latency.
Does this tool handle @keyframes? expand_more
Yes. The tool automatically duplicates @keyframes blocks as @-webkit-keyframes to ensure animations work in WebKit-based browsers like older versions of Safari and Chrome.
In what order does the tool insert the prefixed lines? expand_more
Each set of vendor-prefixed declarations is inserted immediately before the original unprefixed property. This follows the standard cascade convention: the unprefixed version appears last so that browsers supporting the standard property use it rather than a prefixed fallback.
How is this different from the CSS Formatter or CSS Minifier? expand_more
The CSS Formatter and CSS Minifier only change the whitespace and size of your stylesheet — they do not touch property names or values. The Autoprefixer actually adds new declarations to the file, changing its semantic content so that older browsers can understand properties they would otherwise ignore. Run Autoprefixer first, then format or minify the result.
Will it prefix every CSS property? expand_more
No. Only properties that have documented vendor-prefix requirements are processed. Modern properties that are universally supported without prefixes are left exactly as written. You can see the full list of covered properties by clicking the Sample button and reviewing what gets prefixed.
Does the tool work with CSS variables or custom properties? expand_more
CSS custom properties (--variable-name) do not require vendor prefixes because they are natively supported in all modern browsers. The tool will leave them untouched.
Can I use this as a replacement for PostCSS Autoprefixer in a production build? expand_more
This tool is designed for quick manual checks, learning, and small projects without a build pipeline. For large projects with automated builds, the PostCSS Autoprefixer plugin reads from Browserslist configuration and stays updated with the latest browser data, making it better suited for CI workflows.
Is there a limit on how much CSS I can process? expand_more
There is no imposed limit. Because processing runs locally in your browser, you can paste full production stylesheets. Performance depends on your device and browser rather than any server-side quota.