Generador de gradients CSS
Crea gradients CSS lineals, radials i cònics al teu navegador.
Parades de color
Utilitza les nanses d'aturada o les fletxes del teclat per editar posicions. Cada parada inclou un color explícit, opacitat i percentatge.
Processament local natiu de navegador
El seu gradent es manté en aquest navegador. No hi ha colors ni CSS generats que s'envien a Convertr.
Gramàtica d'importació limitada
La importació accepta linear-gradient(), radial-gradient() o conic-gradient() amb colors hex i percentatges. Les declaracions, URL, variables i funcions desconegudes es rebutgen localment.
Fallback accessible
El CSS generat inclou un color de fons sòlid com a alternativa juntament amb el gradient per a renderitzadors no compatibles i el crom de control accessible.
Preguntes freqüents
El meu gradient està carregat?
No. L'estat del gradient, els colors, el CSS importat i el CSS generat es queden al vostre navegador.
Quins tipus de gradient CSS són compatibles?
El generador crea una sortida linear-gradient(), radial-gradient() i conic-gradient() amb múltiples parades de color hex.
Què puc importar?
La importació accepta una gramàtica deliberadament limitada que utilitza una funció de gradient compatible, colors hex, percentatges opcionals i valors d'angle o posició limitats.
Eines de desenvolupador i disseny relacionades
Generador de gradients CSS
Construeix gradients CSS lineals o radials i previsualitza parades de color, angle, posició i repetició.
- Entrada
- Tipus de degradat, parades de color, posicions, angle i configuracions de repetició.
- Sortida
- Una previsualització en viu i una declaració de fons CSS copiable.
- Les limitacions reals
- La renderització del navegador pot diferir lleugerament segons el motor, i l'eina no avalua el contrast ni garanteix el suport en navegadors heretats.
- Privacitat i tractament de dades
- El tipus de gradient, les parades de color, les posicions, l'angle i les configuracions de repetició es processen en aquesta pestanya del navegador. Convertr no el rep ni l'emmagatzema; tancar o recarregar la pàgina esborra l'estat de treball llevat que l'eina ofereixi explícitament una descàrrega local.
Com utilitzar aquesta eina
- Proporciona tipus de gradient, parades de color, posicions, angle i configuracions de repetició als controls de l'eina.
- Seleccioneu la configuració que afecta una vista prèvia en viu i una declaració de fons CSS copiable, i després executeu l'eina.
- Revisa una vista prèvia en viu i una declaració de fons CSS copiable abans de copiar-la o descarregar-la.
Modes de fallada comuns
Una parada de color que falta, un color invàlid o una posició incompatible impedeix construir una declaració CSS vàlida.
Exemple útil
Crea un gradient lineal de 90 graus des de #111827 al 0% fins a #f59e0b al 100% i copia la declaració.