La majoria d'eines de degradat només et donen una línia de CSS. Aquesta renderitza el degradat en un canvas real i et permet descarregar el PNG acabat a la mida exacta de píxels que necessites: un fons de pantalla per al mòbil, un fons d'escriptori de 1920x1080, una publicació quadrada per a xarxes socials o una mida personalitzada. No es puja res: la imatge es dibuixa i es desa completament al teu dispositiu, així que els teus colors i fitxers continuen sent privats.
Generador de Degradats Gratuït
Funciona del tot al navegador: sense pujar res ni registrar-te.
Tipus
Mida de la imatge
px
Punts de parada de color
Desa un PNG real de 1920×1080 px
Què és un generador de degradats?
Un generador de degradats és una eina que barreja dos o més colors en una transició suau i l'exporta com una imatge que pots descarregar. Tria els teus colors i els seus punts de parada, escull lineal o radial, defineix la mida i desa un PNG per a un fons de pantalla, un fons, un bàner o una miniatura. Tot funciona directament al teu navegador.
Com s’utilitza
- 1Tria lineal o radial. El lineal barreja els colors al llarg d'una línia recta amb l'angle que fixis; el radial els escampa cap enfora des del centre en forma de cercle.
- 2Defineix els teus colors i punts de parada. Fes clic en una mostra per triar un color i arrossega el seu control lliscant per moure el punt de parada. Afegeix fins a 8 punts de parada o redueix-los fins a 2, i prem Aleatori per a una idea ràpida.
- 3Tria la mida de la imatge. Toca un valor predefinit (escriptori, mòbil, quadrat, xarxes socials) o escriu una amplada i alçada personalitzades en píxels. La previsualització s'actualitza en directe.
- 4Descarrega el PNG. Fes clic a Descarrega PNG per desar el degradat com a imatge a resolució completa, o copia el CSS per reutilitzar el mateix degradat al teu codi.
Per a qui és
- Dissenyadors i creadors de contingut que necessiten una imatge de fons amb degradat neta per a una diapositiva, una miniatura, un bàner o una història sense obrir el Photoshop.
- Usuaris de mòbil i escriptori que volen un fons de pantalla amb degradat personalitzat a la resolució exacta de la seva pantalla.
- Desenvolupadors que volen un PNG de degradat lleuger com a marcador de posició o imatge principal, a més del CSS equivalent per reproduir-lo en codi.
- Gestors de xarxes socials que exporten fons de degradat coherents amb la marca, en les mides adequades per a publicacions, històries i imatges de portada.
Preguntes freqüents
És gratuït aquest generador de degradats?
Sí, 100% gratuït, sense registre, sense marques d'aigua i sense límits. Crea i descarrega tantes imatges amb degradat com vulguis.
Es puja alguna cosa a un servidor?
No. El degradat es dibuixa i es desa completament al teu navegador mitjançant canvas. No s'envia enlloc cap color, imatge ni dada d'ús.
En quin format d'imatge exporta?
Exporta un PNG, que manté el degradat perfectament suau i sense pèrdua, sense artefactes de compressió. El fitxer es desa a la mida completa en píxels que hagis definit, a punt per usar-lo com a fons de pantalla, fons o pujar-lo a una altra plataforma.
Quina mida hauria de fer servir per a un fons de pantalla amb degradat?
Fes-la coincidir amb la teva pantalla. Les opcions més habituals són 1920x1080 per a la majoria d'escriptoris, 1080x1920 per a un mòbil en vertical i 1080x1080 per a una publicació quadrada a xarxes socials. També pots introduir qualsevol amplada i alçada personalitzades fins a 8000 píxels.
Quina és la diferència entre un degradat lineal i un de radial?
Un degradat lineal barreja els colors al llarg d'una línia recta amb l'angle que triïs, així que el color canvia a través de la imatge. Un degradat radial comença en un punt central i s'escampa cap enfora en cercle, així que el color canvia des del centre cap a les vores.
Puc obtenir també el CSS a més de la imatge?
Sí. Juntament amb el PNG descarregable, l'eina mostra el CSS de background-image equivalent. Copia'l per reproduir exactament el mateix degradat en un lloc web o app en lloc d'usar el fitxer d'imatge.
Com funcionen els punts de parada de color?
Cada punt de parada aparella un color amb una posició del 0% al 100% al llarg del degradat. La barreja flueix de manera suau entre punts de parada veïns. Col·locar dos punts de parada a la mateixa posició crea una vora dura en lloc d'una transició suau, cosa útil per a ratlles o fons de blocs de color.