Gerador de Starburst / Emblema de Venda CSS — Forma de Sunburst Espinhada
Gere uma forma clip-path starburst/sunburst com muitos picos — o visual clássico de adesivo de selo de venda — a partir de contagem de picos, proporção de raio interno/externo e rotação, com rótulo de texto centralizado e visualização ao vivo.
Entrada
Quantos pontos irradiam ao redor do emblema — um sunburst suave em 6, um starburst denso em 32.
Raio interno como percentual do raio externo — valores mais baixos produzem picos mais longos e afiados; valores mais altos mantêm-nos curtos e rombudos.
Gira o emblema inteiro — útil para alinhar a ponta de um pico exatamente onde você quer.
Exibido centralizado no topo do emblema na visualização e no trecho HTML.
Saída
Seu emblema starburst aparecerá aqui.
Adicione isso à sua folha de estilos, então aplique class="starburst-badge" (com um span "starburst-badge__label" aninhado) à sua marcação.
Marcação com estilo inline correspondente à visualização acima — cole em qualquer lugar, nenhuma folha de estilos necessária.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-starburst-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"spikeCount": "12",
"innerRadiusRatio": "45",
"rotation": "0",
"badgeSize": "220",
"badgeColor": "#ef4444",
"labelText": "50% OFF",
"labelFontSize": "28",
"labelTextColor": "#ffffff"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-starburst-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Starburst / Emblema de Venda CSS — Forma de Sunburst Espinhada — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que é um emblema starburst?
Um emblema starburst (ou sunburst) é a forma de adesivo espinhado usada em etiquetas de preço "50% OFF!", "NEW!" e "SALE!" — uma estrela de muitos pontos irradiando de um centro, geralmente com uma linha curta de texto no meio. É construído inteiramente em CSS com um valor clip-path: polygon(...): uma lista de coordenadas de vértice x% y% que alterna entre um ponto externo longo e um entalhe interno curto ao redor de um círculo inteiro.
Esta ferramenta calcula essa lista de vértices para você a partir de três controles simples — contagem de picos, nitidez de pico e rotação — em vez de uma forma fixa que você teria que editar manualmente. Escolha 8 picos para um selo retrô robusto ou 24 para um efeito de raios de sunburst fino, coloque um rótulo no topo e copie o CSS pronto para usar.
Como usar esta ferramenta
- Configure o Número de Picos — quantos pontos irradiam ao redor do emblema, de um sunburst suave de 6 pontos até um starburst denso de 32 pontos.
- Configure a Nitidez do Pico (Percentual de Raio Interno) — este é o raio de entalhe interno como percentual do raio externo. Valores mais baixos (mais próximos a 10%) puxam os entalhes para apertado para picos longos e afiados; valores mais altos (mais próximos a 90%) mantêm-nos curtos e rombudos.
- Ajuste a Rotação se desejar que uma ponta de pico específica aponte para algum lugar diferente de reto para cima (12 horas).
- Escolha um Tamanho do Emblema, Cor de Preenchimento do Emblema e seu Texto do Rótulo com seu próprio tamanho de fonte e cor.
- Copie o CSS (uma classe
.starburst-badgemais um span.starburst-badge__label) na sua folha de estilos, ou pegue o trecho HTML abaixo — uma versão autossuficiente com estilo inline que você pode colar em qualquer lugar sem tocar em uma folha de estilos.
Como a forma é construída
O polígono tem 2 × contagem de picos vértices. Vértices com índice par ficam no raio externo (as pontas dos picos, na borda da caixa do emblema); vértices com índice ímpar ficam no raio interno (os entalhes entre picos). Caminhar uniformemente ao redor do círculo e alternar entre os dois raios é o que produz a silhueta clássica de estrela/sunburst — a mesma construção que uma estrela de 5 pontos usa, generalizada para qualquer contagem de picos.
FAQ
Por que o texto não toca as pontas dos picos?
O rótulo é centralizado com flexbox dentro da caixa completa do emblema (pré-clip), e limitado a uma largura máxima de 60% para ficar claro dos entalhes entre picos em qualquer contagem de picos — um clip-path corta o que é visível, mas não muda a caixa de layout abaixo, então a centralização ainda funciona exatamente como em um retângulo não cortado.
Posso usar isso para algo além de um emblema de venda? Sim — um clip-path starburst é apenas uma forma. Coloque uma imagem de fundo atrás dele em vez de uma cor sólida, ou pule o rótulo completamente e use-o como um acento decorativo, um substituto de fita "featured" ou uma forma de callout no estilo de quadrinho "BOOM!".
E se eu precisar de uma forma fixa específica em vez de um starburst procedural — triângulo, hexágono ou a predefinição clássica de estrela de 10 pontos? Use o CSS Clip-Path Generator, que cobre círculos, elipses, insets e uma biblioteca de predefinições de polígonos comuns (incluindo uma estrela fixa), além de uma lista de pontos personalizada editável à mão.
Privacidade
Tudo acontece no seu navegador. Sua contagem de picos, cores e texto de rótulo nunca são enviados para um servidor — o CSS e a visualização são atualizados localmente conforme você ajusta os controles.