Gerador de Shapes CSS

Formas prontas — triângulos, hexágonos, estrelas — geradas com clip-path.

Efeitos & Visual

 estilo.css

clip-path: polygon()

Cada forma pronta é apenas uma lista diferente de coordenadas — edite os percentuais para ajustar proporções depois de copiar o código.

Formas sem imagens

Usar CSS para formas evita requisições HTTP extras e permite recolorir/animar a forma livremente com as demais propriedades do elemento.

Perguntas frequentes

Posso combinar uma forma com gradiente?

Sim — aplique um background gradient no mesmo elemento; o clip-path recorta o resultado final.

As formas são responsivas?

Sim, por usarem porcentagens, elas se adaptam ao redimensionar o elemento.

Como adicionar sombra numa forma com clip-path?

box-shadow não segue o clip-path. Use um filter: drop-shadow() no lugar, que respeita o contorno recortado.

Recorte elementos com polígonos e formas personalizadas usando clip-path.

Gradientes lineares, radiais e cônicos com múltiplos stops de cor.

Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.