English
EspañolSlider antes e depois para site
Cole os endereços das duas fotos (do mesmo tamanho e enquadramento). Arraste a divisória na prévia e copie o código.
Antes e depois com divisória arrastável
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Slider antes e depois para site: para que serve
Para serviços que mudam a aparência de algo, como barbearia, estética automotiva, reforma ou limpeza, mostrar o antes e o depois na mesma foto convence mais do que qualquer texto.
Cole as duas fotos e o gerador monta o comparador com a divisória que se arrasta com o dedo ou o mouse, rótulos, posição inicial e cor. Por baixo, a divisória é um input range, então funciona com as setas do teclado e é anunciada pelo leitor de tela; o recorte é feito com clip-path, sem biblioteca.
Como usar
- Cole os endereços das fotos do antes e do depois.
- Escreva os rótulos, a descrição e a posição inicial.
- Copie o código e cole na página.
Quando usar
- Barbearia e salão de beleza.
- Estética automotiva e funilaria.
- Reformas, pintura e limpeza.
Perguntas frequentes
Para que negócios serve?
Para qualquer serviço que muda a aparência de algo: barbearia, salão, estética automotiva, reforma, pintura, limpeza de estofados, odontologia estética, paisagismo. Ver a diferença na mesma foto convence mais do que duas fotos soltas.
Como fica acessível?
A divisória é um input range de verdade por baixo: dá para mover com as setas do teclado, e o leitor de tela anuncia a porcentagem. As duas fotos têm texto alternativo.
As fotos precisam ser iguais?
Precisam ter a mesma proporção e, de preferência, o mesmo enquadramento, tiradas do mesmo lugar. Se as proporções forem diferentes, a foto de cima é cortada para caber (object-fit: cover).
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.