Creador de degradados CSS
Construye exactamente el degradado que quieres.
Elige la geometría, define con precisión las paradas de color y la opacidad y usa los mismos valores para la vista previa y el CSS exportado.
- Posiciones exactas
- Cortes duros compatibles
- Funciona en este navegador
Ajustes del degradado
Cada cambio válido actualiza de inmediato la vista previa y el CSS. Los valores no válidos siguen editables y nunca se corrigen silenciosamente.
Geometría
Introduce un ángulo de 0 a 360.
Usa un valor de 0 a 360.
Introduce un valor de centro de 0 a 100.
Introduce un valor de centro de 0 a 100.
Usa valores de 0 a 100 para los centros horizontal y vertical.
Paradas de color
Las posiciones se ordenan de 0 % a 100 % en el CSS. Las paradas con la misma posición conservan el orden de la lista para crear un corte duro.
-
{{ t('stops.itemTitle', { number: index + 1 }) }}
Introduce un color HEX como #1F4E79.
Opacidad y posición
%Introduce una opacidad de 0 a 100.
%Introduce una posición de 0 a 100.
Un degradado necesita al menos dos paradas.