Funcionament del Generador de degradats
Aquesta eina permet crear un degradat CSS mitjançant la selecció del seu tipus, l'ajust de la seva direcció o forma, i l'addició de fins a vuit punts de parada de color. A mesura que es realitzen canvis en els paràmetres, es mostra una previsualització en temps real del degradat i es pot copiar el codi CSS generat amb un sol clic.
El degradat inicial inclou dos punts de parada de color per defecte: #6366f1 0% i #ec4899 100%. Quan es prem el botó per copiar el codi, l'estat d'aquest canvia temporalment per indicar que s'ha completat l'acció.
Paràmetres d'entrada de l'eina
L'interfície disposa de controls específics per definir l'estructura visual del degradat:
- Tipus de degradat: Permet triar entre les opcions Lineal, Radial o Cònic.
- Angle: Un valor numèric utilitzat per als degradats lineals o cònics.
- Forma: Permet seleccionar El·lipse o Cercle per als degradats radials.
- Punts de parada de color: Es poden configurar fins a un màxim de vuit punts de parada. Cada punt disposa de:
- Color del punt de parada: El valor cromàtic seleccionat.
- Posició: Un percentatge que va des del 0% fins al 100%.
Els nous punts de parada que s'afegeixen s'inicien de manera predeterminada en la posició del 50%. Quan s'arriba al límit màxim de vuit punts de parada actius, el botó per afegir-ne de nous queda inhabilitat.
Fonaments dels degradats CSS i tipologies
Els degradats CSS es classifiquen segons la geometria que utilitzen per distribuir la transició de colors:
Degradats lineals
Un degradat lineal barreja els colors al llarg d'una línia recta. La direcció d'aquesta línia es defineix mitjançant un angle numèric on 0° apunta directament cap amunt i 90° apunta cap a la dreta. Els colors es van succeint de manera progressiva seguint la trajectòria establerta per aquest vector.
Degradats radials
Un degradat radial estén els colors cap a l'exterior des del punt central. A diferència dels lineals, aquest tipus de degradat no utilitza un angle de direcció, sinó que es defineix a partir d'una forma geomètrica que pot ser un cercle o una el·lipse. La transició es propaga de manera concèntrica des del nucli cap a les vores de la forma seleccionada.
Degradats cònics
Un degradat cònic fa girar els colors al voltant d'un punt central, de manera similar a com es distribueixen els tons en una roda de colors o en el rastre d'un radar. L'angle inicial determina el punt de partida de la transició, que escombra l'espai en sentit horari al voltant del centre.
El paper dels punts de parada de color
Els punts de parada de color determinen la distribució cromàtica al llarg de l'estructura del degradat. Cada punt actua com una àncora que fixa un color concret en una posició percentual específica, on el 0% representa l'inici del recorregut i el 100% representa el final.
La distància entre els diferents punts de parada defineix la suavitat de la transició. Un espai ampli entre dos punts genera una barreja gradual i difuminada, mentre que dues posicions molt properes o idèntiques creen una transició abrupta o una línia de divisió sòlida. L'eina admet la configuració detallada de fins a vuit d'aquests punts per dissenyar transicions complexes.
Aplicació pràctica en disseny web
Els degradats CSS s'utilitzen principalment per generar fons visuals en elements de la interfície d'un lloc web. L'ús de codi CSS en lloc d'imatges de mapa de bits redueix el temps de càrrega de la pàgina i garanteix que el fons s'adapti perfectament a qualsevol resolució de pantalla sense perdre nitidesa.
Aquest generador és d'utilitat tant per a ajustos ràpids de dos colors i una direcció com per a dissenys més elaborats on desenvolupadors front-end o dissenyadors necessiten controlar amb precisió múltiples punts de parada, tipus de degradat i distribucions espacials.
Privadesa i processament de dades
Cada degradat es renderitza directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo, garantint que tot el processament dels colors i la generació del codi CSS es realitzin de manera local en el dispositiu de l'usuari.
Preguntes freqüents
Quina és la diferència entre degradats lineals, radials i cònics?
Un degradat lineal barreja colors al llarg d'una línia recta que s'orienta amb un angle. Un degradat radial els estén cap a l'exterior des del centre en forma de cercle o el·lipse. Un degradat cònic els fa girar al voltant del centre com una roda de colors.
Què són els punts de parada de color?
Cada punt de parada és un color fixat en una posició al llarg del degradat: 0% a l'inici, 100% al final. Moveu un punt de parada per desplaçar on assoleix el seu màxim de color, o afegiu-ne més per a una barreja més rica. En podeu utilitzar fins a vuit.
Com controlo la direcció?
Per a un degradat lineal o cònic, el lliscador d'angle en defineix la direcció: 0° apunta cap amunt, 90° cap a la dreta. Un degradat radial no té angle; en el seu lloc, trieu una forma de cercle o el·lipse per canviar com s'estén.