Visualize o posicionamento da imagem, dimensionamento, repetição e sobreposições de gradiente, então copie o CSS correspondente.
Escolha uma imagem de origem suportada ou comece com o modelo de texto quando a ferramenta fornecer um.
Carregue uma imagem local para visualizar cover, contain, posicionamento, repetição e uma sobreposição. Defina o caminho do ativo publicado separadamente; o CSS gerado usa esse caminho e não incorpora ou carrega o arquivo de origem.
Inspecione a visualização completa e as configurações de saída. Baixe o ativo finalizado, mantendo o original disponível para comparação.
Sobre esta ferramenta
Visualize o posicionamento da imagem, dimensionamento, repetição e sobreposições de gradiente, então copie o CSS correspondente.
Carregue uma imagem local para visualizar cover, contain, posicionamento, repetição e uma sobreposição. Defina o caminho do ativo publicado separadamente; o CSS gerado usa esse caminho e não incorpora ou carrega o arquivo de origem.
Escolha uma imagem de origem suportada ou comece com o modelo de texto quando a ferramenta fornecer um. Carregue uma imagem local para visualizar cover, contain, posicionamento, repetição e uma sobreposição. Defina o caminho do ativo publicado separadamente; o CSS gerado usa esse caminho e não incorpora ou carrega o arquivo de origem.
A visualização local usa o arquivo que você selecionou. Seu site precisa de um ativo hospedado ou um caminho no seu projeto. Carregue ou copie a imagem para lá e garanta que o caminho CSS seja resolvido a partir da sua folha de estilo.
O processamento de imagem ocorre no seu navegador. Baixe o resultado antes de fechar a aba. A ferramenta não sobrescreve seu arquivo original.
Entradas aceitas: JPG, PNG, WebP, AVIF, GIF. Saídas disponíveis: TXT. O suporte à decodificação do navegador e as configurações de saída selecionadas determinam quais arquivos de origem podem ser processados.
Nenhuma conta é necessária para esta ferramenta. Você pode revisar a saída antes de salvá-la no seu dispositivo.
