Use Animated gradient quando a interface precisar de gradiente e mesh animados para hero e seções promocionais.
Animated gradient
Gradiente e mesh animados para hero e seções promocionais. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Base
Gradiente e mesh animados para hero e seções promocionais.
HTML e exemplo
<section class="sc-bg-demo sc-bg-3"><div><span class="sc-badge">GRADIENTE</span><h2>Cor em movimento.</h2><p>Uma superfície viva com fallback para redução de movimento.</p></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Usar HTML semântico e foco visível.
- Fornecer rótulo acessível quando não houver texto visível.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.