CSS Vendor Prefix Generator

Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones

Cómo usar Generador de Prefijos de Proveedor CSS

1
Pega tu CSS
Coloca en el cuadro de entrada de código tus reglas CSS, como una declaración de flex o de transition.
2
Selecciona los prefijos
Elige qué prefijos de proveedor añadir, incluidos -webkit-, -moz-, -ms- y -o-, según los navegadores que necesites admitir.
3
Genera el CSS con prefijos
Haz clic en Generar prefijos para producir una versión de tu código con las propiedades prefijadas correspondientes añadidas.

4
Copia el resultado
Copia el CSS con prefijos de la salida y pégalo de nuevo en tu hoja de estilos.

Preguntas frecuentes

¿Para qué sirven los prefijos de proveedor en CSS?

Los prefijos de proveedor como -webkit-, -moz-, -ms- y -o- te permiten usar propiedades que un motor de navegador implementó antes de su estandarización. Añadirlos mejora la compatibilidad entre navegadores para versiones antiguas.

¿Qué prefijos puede añadir esta herramienta?

Puede generar los cuatro prefijos habituales: -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (Internet Explorer y Edge antiguos) y -o- (Opera antiguo), y tú eliges cuáles incluir.

¿Aplica prefijos a todas las propiedades que pego?

Añade variantes con prefijo a las propiedades que históricamente los necesitaron y deja sin cambios las propiedades estándar y totalmente compatibles, de modo que tu salida se mantiene limpia en lugar de llenarse de líneas innecesarias.

¿Sigo necesitando prefijos de proveedor hoy en día?

Muchas propiedades modernas ya no los requieren, pero los prefijos siguen siendo útiles para dar soporte a navegadores antiguos o a funciones concretas. Esta herramienta facilita añadirlos cuando los navegadores objetivo de tu proyecto lo exigen.

¿Se envía mi CSS a algún sitio?

No. La aplicación de prefijos se ejecuta íntegramente en tu navegador, por lo que tu CSS nunca se sube a un servidor. La herramienta es de uso gratuito y no requiere registro.

Herramientas relacionadas

Sigue trabajando con estas prácticas herramientas

Conversor de Unidades CSS

Generador de Meta Tags

Generador de Robots.txt

Open Graph Previewer

Codificador/Decodificador de Entidades HTML

Visor de Cabeceras HTTP