Generador de degradats CSS

Com utilitzar el generador de degradats CSS

1. Tria un Tipus de degradat: Lineal, Radial o Cònic. La previsualització gran de dalt s’actualitza amb cada canvi.
2. En un degradat lineal, ajusta l’Angle amb el lliscador o escriu-lo en graus (90° va d’esquerra a dreta, 180° de dalt a baix). En un degradat cònic, l’angle és el punt on comença el recorregut.
3. En els degradats radials i cònics, mou el centre amb Centre X i Centre Y. Un degradat radial pot ser un Cercle o una El·lipse (el menú Forma).
4. Edita les Parades de color. Fes clic en qualsevol punt de la barra per afegir-hi una parada amb el color que el degradat ja té en aquell punt, o fes servir Afegeix una parada per omplir el buit més ample. Arrossega un tirador per moure’l. Cada parada també té una fila on pots triar-ne el color, escriure qualsevol color CSS, definir-ne la Posició (%) o Elimina-la (un degradat conserva almenys dues parades).
5. Si vols, marca Repetitiu, tria la Interpolació del color, fes clic a Inverteix per capgirar les parades o a Degradat aleatori per inspirar-te.
6. Copia el resultat de Codi CSS amb el botó Copia.

Teclat: posa el focus en un tirador de la barra i fes servir les tecles de fletxa per moure’l d‘1 % en 1 % (de 10 % en 10 % amb Maj), Inici i Fi per saltar als extrems, i Supr per eliminar-lo.

Les tres funcions de degradat

• linear-gradient() barreja els colors al llarg d’una línia recta. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) va de l’indi a l’esquerra al rosa a la dreta. Els angles són en sentit horari des de dalt: 0deg apunta cap amunt, 90deg cap a la dreta.
• radial-gradient() irradia des d’un punt central. radial-gradient(circle at 30% 40%, …) situa el centre al 30 % des de l’esquerra i al 40 % des de dalt. Una el·lipse s’estira amb el requadre; un cercle continua sent rodó.
• conic-gradient() fa un recorregut al voltant d’un centre com les busques d’un rellotge. conic-gradient(from 0deg at 50% 50%, …) serveix per fer cercles cromàtics, gràfics circulars i efectes de carregador. Les posicions de les parades són parts de la volta completa.

L’opció Repetitiu fa servir repeating-linear-gradient() i les seves germanes: el patró definit per les teves parades es repeteix fins a omplir el requadre. Posa l’última parada ben per sota del 100 % (per exemple 20 %) per veure ratlles o anells.

Dues parades a la mateixa posició creen una vora dura en lloc d’una barreja, que és com es fan les ratlles i les banderes. El generador manté les parades ordenades per posició al codi, tal com exigeix CSS.

Interpolació sRGB o OKLCH

Per defecte, els navegadors barregen els colors dels degradats en sRGB. Entre dos colors saturats, com el blau i el groc, això sovint crea un gris apagat o un mig tèrbol. CSS Color Level 4 permet triar l’espai d’interpolació: linear-gradient(90deg in oklch, …) barreja a l’espai perceptual OKLCH i manté viu el punt mitjà.

Amb OKLCH (més suau, amb alternativa sRGB), l’eina escriu dues declaracions background: primer la versió clàssica sRGB i després la d’OKLCH. Els navegadors que admeten espais d’interpolació (Chrome i Edge 111+, Safari 16.2+, Firefox 127+) fan servir la segona línia; els més antics l’ignoren i es queden amb la primera.

Consells

• Els camps de parada accepten colors amb transparència, per exemple #00000080 o rgb(0 0 0 / 50%), cosa que va bé per a capes superposades sobre imatges.
• El codi s’escriu amb background. Fes servir background-image si defineixes per separat altres propietats de fons.
• Els degradats subtils (dos tons propers d’un mateix color) solen semblar més professionals que les barreges d’arc de Sant Martí.