Escriure la sintaxi d'un gradient a mà és feixuc: l'angle, l'ordre dels stops i les posicions en percentatge interactuen entre si, i una simple errada tipogràfica trenca tot el background sense avisar. Aquest generador manté la vista prèvia i el codi perfectament sincronitzats - el que veus és, byte a byte, el CSS que copies. Funciona íntegrament al costat del client, així que res del que dissenyes es puja enlloc.
Generador de gradients CSS gratuït
Funciona del tot al navegador: sense pujar res ni registrar-te.
Tipus
Color stops
Codi CSS
Què és un generador de gradients CSS?
Un generador de gradients CSS és una eina visual que crea el codi linear-gradient(), radial-gradient() o conic-gradient() per tu. Tries els colors, arrossegues la posició de cada stop, ajustes l'angle i copies el CSS a punt per enganxar mentre una vista prèvia en directe mostra exactament el que renderitzarà el navegador. Tot passa dins el teu navegador.
Com s’utilitza
- 1Tria un tipus de gradient. Escull lineal, radial o cònic. El lineal mostra un control lliscant d'angle; el radial afegeix forma (cercle o el·lipse) i posició; el cònic té un angle inicial i una posició.
- 2Configura els color stops. Clica cada mostra de color per triar-lo i arrossega el seu control lliscant per moure el stop al llarg del gradient. Afegeix fins a 8 stops, o elimina'ls fins a deixar-ne 2.
- 3Ajusta la direcció. Arrossega el control lliscant de l'angle (0-360 graus) o tria una paraula clau de posició. La vista prèvia s'actualitza en directe amb cada canvi.
- 4Copia el CSS. Prem Copia per obtenir la declaració de background, amb una línia de color sòlid de reserva inclosa, i enganxa-la al teu full d'estils.
Per a qui és
- Desenvolupadors front-end que necessiten un fons per a un hero, una targeta o un botó i volen la línia exacta de
linear-gradient()sense memoritzar la sintaxi. - Dissenyadors web i UI que reprodueixen un mockup: recreen el gradient visualment i passen el CSS generat directament a l'equip de desenvolupament.
- Creadors d'emails i landing pages que necessiten una línia de color sòlid de reserva perquè el disseny es degradi bé en clients antics - la sortida ja n'inclou una automàticament.
- Estudiants que aprenen CSS i volen veure com l'angle, els color stops i el tipus de gradient canvien el resultat en temps real.
Preguntes freqüents
És gratuït aquest generador de gradients CSS?
Sí - 100% gratuït, sense registre, sense marques d'aigua, sense límits. Crea tants gradients com vulguis i copia el CSS directament al teu projecte.
Es puja alguna cosa a un servidor?
No. El gradient es crea i es visualitza prèviament íntegrament al teu navegador amb JavaScript simple. No s'envia cap color, codi ni dada d'ús enlloc.
Quina diferència hi ha entre gradients lineals, radials i cònics?
Un gradient lineal barreja colors al llarg d'una línia recta amb l'angle que triïs. Un gradient radial s'expandeix cap a fora des d'un punt central en forma de cercle o el·lipse. Un gradient cònic gira els colors al voltant d'un punt central, com una roda de colors o un gràfic de sectors.
Com funcionen els color stops en els gradients CSS?
Cada stop associa un color amb una posició entre el 0% i el 100% al llarg de la línia del gradient. El navegador barreja suaument els stops veïns. Si poses dos stops a la mateixa posició, es crea una vora dura en comptes d'una barreja - útil per a franges o efectes de gràfic de sectors.
Quins navegadors admeten aquests gradients?
Tots els navegadors moderns - Chrome, Firefox, Safari i Edge - admeten linear-gradient() i radial-gradient() sense prefix; conic-gradient() és compatible arreu des del 2020. El codi copiat també inclou un color sòlid de reserva per a qualsevol cosa més antiga.
Puc fer servir el gradient generat com a color de text?
No directament - els gradients són imatges, no colors. Aplica el gradient com a background-image a l'element de text, i afegeix background-clip: text i color: transparent perquè el gradient es vegi a través de les lletres.
Per què el meu gradient mostra franges (banding)?
El banding apareix quan dos stops llunyans es barregen al llarg d'un tram llarg de tonalitats semblants, deixant al descobert els salts de color de 8 bits. Redueix-lo afegint un color stop intermedi, escurçant la distància de barreja, o triant colors que difereixin en lluminositat, no només en to.