Generador de degradats CSS
Crea degradats CSS amb vista prèvia
Com usar Generador de degradats CSS
Crea degradats CSS amb vista prèvia Eina gratuïta en línia, sense registre, sense anuncis intrusius. Utilitza-la ara.
Per a qué s'utilitzen els gradients CSS?
Els gradients CSS creen transicions de color suaus directament al navegador sense carregar fitxers d'imatge. Són un pilar del disseny web modern — permeten efectes visuals rics sense cap petició HTTP addicional, millorant el rendiment i les mètriques de Core Web Vitals de Google.
- Fons de seccions hero: Els fons amb gradient de tota l'amplada en les pàgines d'aterratge creen impacte visual sense imatges pesades. Un gradient lineal del color primari al secundari de la marca estableix la identitat visual de manera immediata.
- Estil de botons: Els fons amb gradient en els botons de crida a l'acció afegeixen profunditat i pes visual.
background: linear-gradient(135deg, #7B35F5, #C040A0)és un exemple de gradient diagonal vibrant. - Text amb gradient: Apliqueu gradients al text amb
background-clip: texti-webkit-text-fill-color: transparent— crea títols visualment impactants molt habituals en els llocs web moderns. - Efectes de superposició: Una superposició de gradient semitransparent sobre una imatge (de transparent a negre) millora la llegibilitat del text superposat sense bloquejar completament la imatge de fons.
- Barres de progrés i visualització de dades: Els farcits amb gradient en les barres de progrés i els elements de gràfics fan les dades visualment més atractives i modernes.
Tipus de gradients: linear-gradient(direcció, color1, color2) per a gradients direccionals. radial-gradient(forma, color1, color2) per a gradients circulars/el·líptics. conic-gradient(color1, color2) per a gradients de rotació estil diagrama circular (CSS4 — suportat per tots els navegadors moderns).
Frequently Asked Questions
Quina diferència hi ha entre gradients lineals, radials i cònics?
Els gradients lineals fan la transició dels colors al llarg d'una línia recta (de dalt a baix, d'esquerra a dreta o qualsevol angle). Els gradients radials irradien des d'un punt central cap a l'exterior en un cercle o el·lipse. Els gradients cònics fan la transició al voltant d'un punt central — com la cara d'una roda de colors o un diagrama circular. Cadascun crea un efecte visual fonamentalment diferent.
Com creo un gradient que es repeteixi?
Feu servir repeating-linear-gradient() o repeating-radial-gradient(). Especifiqueu el gradient amb una longitud definida: repeating-linear-gradient(45deg, vermell 0px, vermell 10px, blau 10px, blau 20px) crea ratlles diagonals. Sense una mida de patró definida, els gradients repetitius es comporten com els gradients regulars.
Els gradients es poden animar amb CSS?
Els gradients en si mateixos no es poden fer la transició directament amb CSS transition — background-image no és directament animable. Alternatives: feu servir background-position amb background-size més gran per crear una animació de moviment, o feu servir propietats personalitzades de CSS (variables) per als colors i feu la transició d'aquestes variables.
Qué significa l'angle del gradient?
L'angle en linear-gradient es mesura en el sentit de les agulles del rellotge des de la part superior. 0deg va cap amunt (de baix a dalt). 90deg va cap a la dreta (d'esquerra a dreta). 180deg va cap avall (de dalt a baix). 45deg va diagonalment cap a baix a la dreta. També podeu fer servir paraules clau direccionals: to top, to bottom, to right, to bottom right, etc.
Com creo un gradient amb múltiples punts de color?
Afegiu més valors de color separats per comes: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). El percentatge controla on apareix cada color. Sense percentatges, els punts es distribueixen equitativament. Els punts de color es poden superposar per crear transicions netes en lloc de suaus.
Gradients CSS vs gradients SVG vs gradients d'imatge
Els gradients CSS no necessiten fitxers externs, escalen perfectament i són fàcils d'animar — la primera opció per als fons i els efectes d'interfície d'usuari senzills. Els gradients SVG es poden aplicar a les formes i els camins SVG — més flexibles per a les gràfiques vectorials complexes. Els gradients d'imatge (PNG, JPG) són necessaris per als efectes molt complexos que el CSS no pot reproduir. Per als fons web i els elements de la interfície, els gradients CSS sempre s'han de preferir a les imatges per raons de rendiment.