EspañolEstrelas de avaliação em CSS (nota com frações)
Digite a nota e ajuste o visual. A nota fica numa variável CSS: troque o número e as estrelas acompanham.
Nota 4,7 com a estrela quase cheia
Disponível em: 
Estrelas de avaliação em CSS (nota com frações): para que serve
Estrelas que só ficam cheias ou vazias não mostram a diferença entre 4,1 e 4,9. Este gerador cria estrelas em CSS puro que preenchem a fração exata da nota, com um degradê recortado no texto e a nota numa variável CSS.
Ajuste a quantidade de estrelas, o tamanho, as cores, o número ao lado e o total de avaliações. Há também a versão clicável, feita com botões de opção escondidos, que funciona com mouse, toque e teclado e envia a nota num formulário sem JavaScript. As duas versões têm texto para leitores de tela.
Como usar
- Digite a nota e a quantidade de estrelas.
- Ajuste o tamanho e as cores.
- Copie o código.
Quando usar
- Nota média de produtos.
- Formulário de avaliação.
- Resumo de avaliações em landing pages.
Perguntas frequentes
Como a estrela mostra uma fração?
As estrelas são texto (★) pintado com um degradê que tem uma parada dura: a cor cheia até a porcentagem da nota e a cor vazia depois. Com nota 4,3 de 5, o degradê pinta 86% da largura, e a quinta estrela fica com só um pedaço colorido.
É acessível?
Sim. O elemento tem role=img e um aria-label como 'Nota 4,3 de 5', que é o que os leitores de tela anunciam no lugar dos símbolos.
Como funciona a versão clicável?
Ela usa botões de opção (radio) escondidos, um para cada estrela, então funciona com mouse, toque e teclado (setas) e manda a nota junto com o formulário, sem JavaScript.
É 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.