Generador de degradats CSS
Què és un degradat CSS?
Els degradats CSS us permeten mostrar transicions suaus entre dos o més colors sense utilitzar fitxers d'imatge. Venen en tres tipus: linear-gradient (al llarg d'una línia recta), radial-gradient (irradiant des d'un punt central) i conic-gradient (girant al voltant d'un punt central). Els degradats s'utilitzen per a fons, botons, superposicions i elements decoratius.
Com utilitzar el generador de degradats CSS
-
Trieu un valor predefinit de les mostres o configureu el vostre propi degradat.
-
Trieu el tipus de degradat: linear, radial o conic.
-
Ajusteu l'angle (per a linear/conic) o la forma (per a radial).
-
Editeu els punts de color: canvieu colors i posicions (0–100%).
-
Afegiu o elimineu punts de color segons calgui.
-
Copieu el CSS i enganxeu-lo al vostre full d'estils.
Preguntes Freqüents
Com faig un gradient transparent? Utilitza valors de color rgba() o hsla() amb un canal alfa de 0 per a transparència total. Per exemple, una parada de color rgba(0,0,0,0) és negre totalment transparent, útil per a desvaneïments sobre imatges.
Com creo una parada de color dura (sense transició)? Situa dues parades de color en la mateixa posició — una que acaba i una que comença en aquest punt. Per exemple, vermell 50%, blau 50% crea un canvi instantani de vermell a blau al punt mitjà sense transició de degradat.
Quins navegadors suporten els gradients cònics? Els gradients cònics són suportats en tots els navegadors moderns (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). No són suportats en Internet Explorer.
Puc utilitzar múltiples gradients en el mateix element? Sí. CSS background accepta una llista separada per coma de capes. Pots apilar gradients, combinar-los amb imatges de fons i controlar la posició i mida de cada capa independentment.
Keywords: generador de degradat CSS, degradat lineal, degradat radial, degradat cònic, generador de fons CSS, selector de color per a degradat, eina de degradat CSS