Gerador de balões CSS

Este gerador de balões CSS é uma ferramenta prática que ajuda os usuários a criar facilmente estilos de balões personalizados. Com controles deslizantes, você pode ajustar intuitivamente a largura, altura, cor de fundo, cor do texto, raio da borda, efeito de sombra, bem como a direção e posição da seta, com uma pré-visualização em tempo real para garantir que o design corresponda ao esperado.

Depois de concluído, basta clicar em «Copiar» para copiar o código CSS gerado e aplicá-lo rapidamente ao seu projeto.

Conteúdo

Largura (px，0=Automático)

Tamanho da fonte (px)

Cor de fundo

Cor do texto

Cor da borda

Largura da borda (px)

{{ bdWidth }} px

Raio da borda (px)

{{ radius }} px

Sombra

Padding X (px)

{{ padX }} px

Padding Y (px)

{{ padY }} px

Posição da seta

Alinhamento da seta

Tamanho da seta (px)

{{ arrowSize }} px

Deslocamento da seta (px)

{{ arrowOffset }} px

Cor da seta

Largura calculada (contêiner de pré-visualização)

{{ stageWidth }} px

Visualizar

HTML

CSS