Texto y tipografía
Familia, tamaño y grosor de letra, altura de línea y otros valores compatibles.
Selector visual de elementos para Chrome
Copia el CSS de un elemento, sin llevarte toda la página
¿Te interesa el estilo de un botón, un título o una tarjeta? Selecciónalo en la web, consulta sus valores CSS actuales y copia un fragmento que puedas adaptar en tu editor.
Gratis: 5 copias correctas de CSS al día
Ejemplo de fragmento CSS filtradoCSS
.copied-element {
background-color: #2563eb;
color: #ffffff;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}Ejemplo ilustrativo · los valores dependen del elemento
Los estilos que buscas, sin rebuscar en todo el sitio
A veces solo necesitas saber el padding de una tarjeta o el tamaño de letra de un encabezado. One-Click CSS Copy ofrece una lectura rápida de las propiedades calculadas que resultan útiles, sin obligarte a recorrer cada regla del panel de desarrollador. Para investigar el origen exacto de una declaración, sigue estando DevTools.
Qué puedes encontrar en el CSS copiado
Color y acabado
Colores, fondos, bordes, radios, sombras y ciertos degradados; se omiten las imágenes que dependen de una URL.
Espaciado y estructura
Valores útiles de margin, padding, gap y algunas propiedades de flex, grid y dimensiones.
Vista previa legible
El código aparece antes de copiarlo y se filtran valores predeterminados que no aportan información.
Cómo copiar estilos CSS de un elemento
- 01
Abre una web compatible
Elige una página HTTP/HTTPS normal, no una página interna de Chrome ni la tienda de extensiones.
- 02
Activa el selector
Pulsa el icono de la extensión y luego «Select an element». Verás resaltado lo que esté bajo el cursor.
- 03
Elige y revisa
Haz clic en el elemento. Comprueba el CSS calculado generado bajo el selector de ejemplo .copied-element.
- 04
Copia y adapta
Pulsa «Copy CSS», pega el código y ajusta los valores o el selector a tu proyecto.
Para tareas concretas de diseño web
Recrear el estilo de un botón
Toma como referencia sus esquinas redondeadas, colores y espaciado.
Preparar una tarjeta
Comprueba sombras, bordes y rellenos antes de hacer un prototipo.
Aprender CSS con ejemplos
Observa las propiedades de un título y contrástalas después con DevTools.
CSS calculado no significa CSS original
La extensión consulta getComputedStyle del elemento que seleccionas y reduce el resultado a propiedades relevantes. No sabe qué reglas originales, selectores, variables o media queries dieron lugar a esos valores. .copied-element es un selector de sustitución, no una clase recuperada del sitio.
Cuándo usarlo junto a DevTools
Si buscas un fragmento rápido para una prueba de maquetación, este flujo resulta cómodo. Si necesitas averiguar por qué gana una regla, comparar estados o examinar un pseudoelemento, utiliza las herramientas de desarrollador. Aquí no se pretende sustituir esa investigación.
Lo que no se copia
Cada operación trabaja con un elemento del DOM. No exporta componentes completos, hijos, imágenes externas, fuentes alojadas en otro sitio ni puntos de ruptura responsive. Los iframes de otro origen, Shadow DOM cerrado y el contenido dibujado en canvas tienen limitaciones.
Preguntas frecuentes
¿Puedo copiar el CSS de un botón?
Sí, si está en una página compatible y puede seleccionarse. El fragmento incluye algunas de sus propiedades calculadas.
¿Se extrae la hoja de estilos del sitio?
No. Se obtiene una selección de valores calculados, no los archivos CSS originales.
¿Copia reglas hover o media queries?
No reconstruye esas reglas. Trabaja con el estado y el tamaño de pantalla actuales.
¿Se envía mi página a un servidor?
No en la versión Free estándar. La URL, el HTML y el CSS permanecen en tu navegador.
¿Cuántas copias son gratis?
Cinco copias realizadas correctamente por día natural local.
¿Por qué no funciona en algunas pestañas?
Chrome restringe las páginas internas, Chrome Web Store y ciertos contenidos incrustados.
¿El resultado será idéntico en mi web?
No está garantizado: pueden faltar el contexto del elemento padre, fuentes y otros recursos.
El análisis se queda en el navegador
En la versión Free, el acceso a la pestaña es temporal y se inicia cuando pulsas el selector. No hace falta registrarse ni enviar el código CSS al editor de la extensión.
Gratis: 5 copias correctas de CSS al día