Seletor visual de CSS para Chrome

Copie o CSS de um elemento sem extrair o site inteiro

Gostou do visual de um botão ou card? Selecione apenas aquele elemento, revise os estilos computados e copie um trecho CSS para usar como referência no seu projeto.

Grátis: 5 cópias de CSS concluídas por dia

Ver guia em 4 passos

Exemplo de CSS filtradoCSS

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

Exemplo ilustrativo · os valores variam conforme o elemento

O CSS que importa para a tarefa de agora

Às vezes você precisa descobrir apenas o padding de um card ou a fonte de um título. Em vez de copiar manualmente cada valor do DevTools, use um trecho filtrado do elemento escolhido. Para descobrir a origem exata de uma regra ou investigar a cascata, o DevTools continua sendo a opção certa.

O que aparece no trecho CSS

Fontes e texto

Família, tamanho e peso da fonte, altura de linha e outras propriedades de texto compatíveis.

Cor e acabamento

Cores, fundos, bordas, cantos arredondados, sombras e alguns gradientes. Imagens por URL ficam de fora.

Espaçamentos e layout

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

Prévia antes da cópia

Confira o código em uma área de leitura. Valores padrão e repetições desnecessárias são filtrados.

Como copiar os estilos CSS de um elemento

01
Abra uma página comum
Use um site HTTP/HTTPS compatível. Páginas internas do Chrome e a loja de extensões não permitem a seleção.
02
Inicie a seleção
Clique no ícone e em “Select an element”. O cursor destaca o elemento apontado.
03
Escolha e confira
Clique no botão ou bloco desejado. O painel mostra CSS computado com o seletor de exemplo .copied-element.
04
Copie e adapte
Clique em “Copy CSS”, cole o código no editor e ajuste para o seu layout.

Onde esse recurso ajuda

Estilizar um botão

Use cores, bordas e raio dos cantos como referência para seu próprio componente.

Montar um card

Confira sombra e espaçamentos para testar um layout sem copiar a página inteira.

Estudar CSS na prática

Observe os valores de um título e compare com a aba Computed do DevTools.

CSS computado não é o código-fonte do site

O navegador calcula os valores finais de um elemento com base nas regras ativas. A extensão lê parte desses valores com getComputedStyle e remove itens pouco úteis. Ela não recupera seletores originais, arquivos Sass, variáveis ou breakpoints. A classe .copied-element é apenas um marcador para você substituir.

Use junto com o DevTools

Para colar rapidamente um ponto de partida em um protótipo, a extensão resolve uma tarefa bem específica. Para investigar especificidade, pseudo-elementos, estados de interação ou o contêiner pai, recorra às ferramentas do desenvolvedor. Uma solução complementa a outra.

O que não é copiado

Cada seleção trata um elemento por vez. Não há exportação de site, árvore de componentes, fontes externas, imagens ou media queries. Iframes de outra origem, Shadow DOM fechado e o conteúdo interno de canvas não funcionam como elementos HTML comuns.

Dúvidas frequentes

Posso copiar o CSS de um botão?

Sim. Se estiver em uma página compatível, selecione o botão e copie um trecho dos seus estilos computados.

A extensão baixa o CSS original?

Não. Ela mostra propriedades calculadas do elemento, não arquivos ou regras CSS originais.

Também copia hover e regras responsivas?

Não reconstrói essas regras. O trecho depende do estado atual do elemento e do tamanho da tela.

Meus dados são enviados para algum servidor?

Na versão Free padrão, não: URL, HTML e CSS permanecem no seu navegador.

Quantas cópias gratuitas tenho?

Cinco cópias bem-sucedidas por dia local.

Por que algumas abas não funcionam?

O Chrome bloqueia a execução em páginas internas, na Chrome Web Store e em alguns conteúdos incorporados.

O resultado vai ficar idêntico no meu projeto?

Não necessariamente. As fontes, os recursos e o layout pai podem ser diferentes.

Tudo local na versão gratuita

A versão Free usa acesso temporário à aba ativa depois que você inicia a seleção. Não envia a URL, o HTML nem os estilos selecionados ao desenvolvedor. Você não precisa criar uma conta.