Utiliome

Generador de Gradients CSS

Crea i personalitza gradients CSS lineals, radials i cònics visualment. Copia codi CSS compatible a l'instant. 100% gratuït.

Settings

135°
0%
100%
Standard CSS
background: #8B5CF6; background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
Tailwind CSS (v3/v4 Arbitrary)
bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]

Eines relacionades

Eines que també et podrien fer falta

Generador de paletes de colors

Genera, ajusta i exporta paletes de colors i degradats pel teu projecte UI.

Generador de Glassmorphism

Crea efectes UI de vidre esmerilat. Ajusta el desenfocament i genera CSS.

Extreu paleta de colors

Puja una imatge per extreure a l'instant la seva paleta de colors.

Extractor de colors dominants

Puja una imatge per extreure a l'instant els seus colors dominants.

Generador de Favicon

Genera favicons estàndard i d'alta resolució fàcilment per als teus projectes.

Generador ICO

Converteix imatges a format ICO per a icones i favicons de Windows.

100% Privat • Sense pujades al servidor

Per què usar Generador de Gradients CSS gratuït d'Utiliome?

Privacitat estricta i execució ràpida. Sense subscripcions ni comptes requerits.

Llenç Visual de Gradients

Afegeix, elimina i arrossega punts de color en una línia de temps visual per barrejar gradients multicolors a la perfecció.

Múltiples Tipus de Gradient

Canvia fàcilment entre els modes de gradient CSS Lineal (direccional), Radial (circular) i Cònic (en barreges d'angle).

Exportació CSS Immediata

Genera automàticament codi CSS compatible amb tots els navegadors, incloent prefixos de proveïdor per a un suport màxim.

Execució 100% Local

Desenvolupat totalment amb JavaScript al costat del client. Sense retard del servidor, sense esperes, només resposta visual al moment.

Utiliome vs Alternatives al núvol

Compara el nostre motor local WebAssembly amb eines al núvol.

Funció Utiliome (Navegador Local) Convertidors al núvol
Tipus de Gradient Lineal, Radial, Cònic Normalment només Lineal
Codi Generat CSS Pur i classes Tailwind Només ofereix CSS bàsic
Rendiment HTML5 Canvas sense latència Redibuixat de DOM lent
Cost 100% Gratuït per sempre Funcions premium bloquejades darrere pagaments

Com utilitzar Generador de Gradients CSS en 3 passos

Sense instal·lar res. Tot s'executa al teu navegador web.

1

Selecciona els Colors

Fes clic als punts de color de la línia de temps per triar els codis HEX d'inici i final.

2

Ajusta la Direcció

Utilitza el selector d'angle per girar el gradient lineal, o canvia al mode radial per a un efecte d'expansió central.

3

Copia el CSS

Fes clic al botó de copiar per obtenir el codi CSS de 'background-image' completament formatat.

Per què utilitzar gradients CSS en lloc d'imatges de fons?

Resposta ràpida: Els gradients CSS es generen matemàticament pel navegador, la qual cosa significa que requereixen zero peticions de xarxa HTTP, s'escala perfectament sense pixelar-se en pantalles Retina i ocupen només pocs bytes de text.

Fa una dècada, els dissenyadors web creaven fons amb gradient a Photoshop, els tallaven en imatges JPG grans i els establien com a patrons repetitius. Això era dolent per a l'SEO, reduïa la velocitat de càrrega i es veia molt pixelat en monitors 4K moderns.

Els navegadors moderns van introduir la funció CSS linear-gradient(). Com que és una instrucció matemàtica i no una imatge estàtica, la GPU del navegador processa la barreja en temps real. El generador d'Utiliome et permet crear gradients complexos que es carreguen a l'instant i s'adapten dinàmicament.

Gradients Lineals vs Radials vs Cònics

Resposta ràpida: Els gradients lineals barregen colors en línia recta (ex. de dalt a baix). Els radials s'expandeixen cap a fora des d'un punt central. Els cònics giren els colors al voltant d'un eix central com un gràfic de formatget o una roda de color.

Comprendre els tres tipus principals de gradients CSS permet una gran flexibilitat creativa:

  • Gradients Lineals: El tipus més comú. Defineixes un angle (com 45deg o to right bottom) i els colors transicionen de manera suau.
  • Gradients Radials: Creen un efecte circular o el·líptic. Ideals per destacar un element central o crear ombres 3D realistes.
  • Gradients Cònics: La darrera incorporació a l'especificació CSS. Els colors transicionen al voltant d'un punt central (de 0 a 360 graus). Molt útils per a gràfics de seccions i animacions de càrrega.

Comprendre els punts de color (Color Stops) en CSS

Resposta ràpida: Els punts de color determinen exactament on aconsegueix un color la seva màxima intensitat. En afegir diversos punts (ex. red 0%, yellow 50%, blue 100%), pots crear fons complexos de diverses franges.

Un gradient bàsic només necessita dos colors: un d'inici i un de final. Però Utiliome et permet afegir punts de color il·limitats.

Per exemple, si escrius linear-gradient(to right, red 0%, green 50%, blue 100%), el navegador transicionarà de vermell a verd a la meitat de la pantalla, i de verd a blau al final.

També pots crear tallats nets (línies marcades en lloc de transicions suaus) assignant dos colors diferents al mateix percentatge exactament (ex. red 50%, blue 50%). Aquesta tècnica s'utilitza per crear patrons de ratlles i banderes amb CSS pur.

Com crear gradients de text amb CSS

Resposta ràpida: Pots aplicar gradients directament a la tipografia fent servir les propietats 'background-clip: text' i '-webkit-text-fill-color: transparent', retallant el fons concretament a la forma de la font.

Una de les tendències més populars en disseny web és aplicar gradients vibrants a textos grans, especialment en capçaleres H1 (popularitzat per Apple i Stripe).

Per fer-ho, genera un gradient estàndard amb Utiliome i aplica aquestes tres regles CSS:

  1. Aplica el gradient a l'element: background-image: linear-gradient(...);
  2. Retalla el fons al text: -webkit-background-clip: text; background-clip: text;
  3. Fes la font transparent per mostrar el fons: -webkit-text-fill-color: transparent;

Això garanteix que el text es pugui seleccionar i sigui apte per a SEO, mantenint un aspecte visual espectacular.

Compatibilitat entre navegadors i prefixos de proveïdor

Resposta ràpida: Tot i que els navegadors moderns suporten gradients de manera nativa, els navegadors antics (com versions anteriors de Safari o Internet Explorer) necessitaven prefixos com '-webkit-' i '-moz-'.

Històricament, escriure gradients CSS era complex perquè la sintaxi canviava sovint. Els desenvolupadors havien d'escriure cinc línies de codi diferents per mostrar un gradient a Firefox, Safari i Chrome.

Avui dia, la sintaxi linear-gradient() està adoptada universalment. Tanmateix, per a màxima seguretat en dispositius mòbils antics, Utiliome pot afegir automàticament els prefixos -webkit- necessaris.

Generar classes de gradient per a Tailwind CSS

Resposta ràpida: Tailwind CSS inclou classes d'utilitat per a gradients (ex. 'bg-gradient-to-r from-cyan-500 to-blue-500'). Utiliome et permet dissenyar un gradient visualment i exportar-lo com a classes Tailwind.

Si desenvolupes una aplicació React o Next.js amb Tailwind CSS, escriure atributs style amb CSS pur trenca el flux de treball basat en utilitats.

Utiliome soluciona aquest problema. Quan tinguis el gradient a punt, selecciona l'opció d'exportació a Tailwind. L'eina converteix els teus codis HEX en valors de Tailwind (com from-[#ff0000] via-[#00ff00] to-[#0000ff]) per enganxar-los directament als teus components JSX.

Generador de Gradients CSS PMF i Guia Tècnica

Tot el que cal saber sobre l'ús de l'eina generador de gradients css online gratis d'Utiliome.

Com faig un efecte de text amb gradient en CSS?

Genera el teu gradient i afegeix les propietats CSS: 'background-clip: text;' i '-webkit-text-fill-color: transparent;' per ajustar-lo a la teva font.

Què és un Gradient Cònic?

Un gradient cònic gira els colors al voltant d'un eix central (com un radar o un gràfic de seccions) en lloc de transicionar en línia recta.

Puc exportar el meu gradient a Tailwind CSS?

Sí. L'exportador d'Utiliome inclou una pestanya de Tailwind que genera les classes d'utilitat exactes per als teus projectes React/Next.js.

Els gradients CSS afecten negativament el rendiment del web?

No. Els gradients CSS es repassen mitjançant la GPU. Són molt superiors a utilitzar imatges de fons, no requereixen peticions de xarxa i ocupen poquíssim espai.

Aquest generador CSS és totalment gratuït?

Sí, és 100% gratuït, sense límits, sense anuncis i sense necessitat de registre.