Gerador de setas CSS

Este gerador de setas CSS permite criar vários estilos de seta, incluindo setas sólidas com clip-path e setas em linha construídas com pseudo-elementos. Ajuste direção, comprimento total, tamanho da ponta, comprimento da ponta, espessura do corpo, cor, gradiente e borda opcional, visualize as alterações em tempo real e copie o CSS gerado.

Personalização

Forma

Direção

Total Length {{ totalLength }}px

Tamanho da seta {{ headWidth }}px

Comprimento da ponta {{ headLength }}px

Espessura do corpo {{ shaftThickness }}px

Cor da seta

{{ startColor }}

Cor final do gradiente

{{ endColor }}

Ângulo {{ gradientAngle }}deg

Borda

Largura da borda {{ borderWidth }}px

Cor da borda

Visualizar

{{ arrowWidth }} x {{ arrowHeight }} px

CSS