Ferramenta de seleção de CSS para Chrome

Copie os estilos CSS de um elemento, sem copiar o site inteiro

Encontrou um botão ou cartão com o aspeto que procurava? Selecione apenas esse elemento, veja os seus estilos calculados e copie um excerto para adaptar ao seu código.

Grátis: 5 cópias de CSS bem-sucedidas por dia

Ver guia em 4 passos

Exemplo de um excerto CSS filtradoCSS

.copied-element {
  background-color: #2563eb;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
}

Exemplo ilustrativo · os valores dependem do elemento

Quando só precisa das propriedades de um elemento

Nem sempre é preciso percorrer todas as regras no DevTools. Para consultar o espaçamento de um cartão ou o tipo de letra de um título, basta um ponto de partida claro. A extensão reúne valores úteis do elemento escolhido; a análise da cascata e dos ficheiros de origem continua a ser feita nas ferramentas de programador.

Que valores entram no excerto CSS

Tipografia

Tipo, tamanho e peso da letra, altura de linha e outras propriedades de texto suportadas.

Cores e acabamento

Cor, fundo, contornos, cantos arredondados, sombras e alguns gradientes. São excluídas imagens referenciadas por URL.

Margens e disposição

Valores úteis de margin, padding, gap, display e algumas propriedades Flexbox ou Grid.

Pré-visualização antes da cópia

O código surge num campo só de leitura e são filtrados valores predefinidos ou redundantes.

Como obter os estilos CSS de um elemento

01
Abra uma página compatível
Utilize uma página HTTP/HTTPS normal. As páginas internas do Chrome e a Chrome Web Store não estão disponíveis.
02
Ative a seleção
Clique no ícone da extensão e escolha «Select an element». O elemento sob o ponteiro fica destacado.
03
Verifique o resultado
Clique no elemento pretendido. O painel mostra os estilos calculados com o seletor provisório .copied-element.
04
Copie e adapte
Prima «Copy CSS», cole o excerto no seu editor e ajuste-o ao contexto do projeto.

Onde pode ser útil

Preparar o estilo de um botão

Consultar cores, tipografia e cantos arredondados antes de criar a sua própria versão.

Construir um cartão

Usar margens, espaçamentos e sombras como referência numa maquete.

Aprender a ler CSS

Observar os valores de um título e compará-los com o painel Computed do DevTools.

Estilos calculados não são o CSS de origem

O navegador calcula os valores finais a partir das regras ativas. A extensão consulta parte desses valores com getComputedStyle e apresenta-os de forma filtrada. Não recupera seletores originais, ficheiros Sass, nomes de variáveis CSS nem media queries. O seletor .copied-element é apenas um exemplo que deve substituir.

Uma ajuda, não um substituto do DevTools

Para obter rapidamente um excerto e começar a experimentar, a extensão evita copiar propriedades uma a uma. Se quiser investigar especificidade, regras de origem, pseudoelementos ou o contexto do elemento-pai, abra as ferramentas de programador do Chrome.

O que fica de fora

Só é analisado um elemento do DOM de cada vez. A ferramenta não exporta árvores de componentes, imagens externas, tipos de letra alojados noutro servidor nem regras responsive. Iframes de outra origem, Shadow DOM fechado e conteúdos desenhados em canvas não funcionam como elementos HTML comuns.

Perguntas frequentes

Posso copiar o CSS de um botão?

Sim, numa página compatível. A extensão mostra e copia uma seleção dos estilos calculados do botão.

Obtém os ficheiros CSS originais?

Não. Trabalha com valores calculados, não com as regras ou ficheiros de origem.

Copia estilos hover e media queries?

Não reconstrói essas regras. O resultado depende do estado atual e da dimensão da janela.

Os dados da página são enviados para um servidor?

Não na versão Free padrão. O URL, o HTML e o CSS permanecem no navegador.

Quantas cópias posso fazer gratuitamente?

Cinco cópias bem-sucedidas por dia de calendário local.

Porque não funciona em certos separadores?

O Chrome impede a seleção em páginas internas, na Chrome Web Store e em determinadas áreas incorporadas.

O aspeto fica idêntico no meu projeto?

Não há essa garantia: a disposição, os tipos de letra e outros recursos podem variar.

Processamento local na versão gratuita

O acesso ao separador ativo é temporário e começa apenas quando inicia a seleção. Na versão Free padrão, o URL, o conteúdo da página e o CSS não são enviados ao editor. Não é necessário criar conta.