Generador de degradat animat
Creeu fons de degradat animats amb transicions de color suaus en moviment, ajusteu la velocitat i copieu el codi CSS amb keyframes per al vostre lloc web.
Vista prèvia
Configuració
Codi CSS
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
linear-gradient(-45deg, #667eea, #764ba2, #f093fb);
animation: gradient-shift 5s ease infinite;
background-size: 400% 400%;
}Creeu fons de degradat animats amb transicions de color suaus en moviment, ajusteu la velocitat i copieu el codi CSS amb keyframes per al vostre lloc web.
Generador de degradat animat mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Generador de degradat animat i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Creeu fons de degradat animats amb transicions de color suaus en moviment, ajusteu la velocitat i copieu el codi CSS amb keyframes per al vostre lloc web. Generador de degradat animat es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Generador de degradat animat: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són CSS, Keyframes, Tailwind. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Generador de degradat animat utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Generador de degradat animat ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
animated-gradient: guia pràctica de gradients
Guia localitzada per utilitzar animated-gradient, entendre bones pràctiques de gradients i evitar errors comuns.
animated-gradient: guia pràctica de gradients
Guia localitzada per utilitzar animated-gradient, entendre bones pràctiques de gradients i evitar errors comuns.
animated-gradient: guia pràctica de gradients
Guia localitzada per utilitzar animated-gradient, entendre bones pràctiques de gradients i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.