Cómo se usa
- Parte de un predefinido o del degradado por defecto.
- Haz clic en la barra para añadir colores; arrastra las paradas para moverlas.
- Elige lineal, radial o cónico y ajusta el ángulo o el centro.
- Copia la declaración CSS o la clase de Tailwind.
Opciones explicadas
- Lineal
- Los colores cambian a lo largo de una línea recta. 0° va hacia arriba, 90° hacia la derecha y 180° hacia abajo.
- Radial
- Los colores se extienden desde un punto central en forma de círculo o de elipse que se ajusta al elemento.
- Cónico
- Los colores giran alrededor de un punto central, como una rueda de colores o un gráfico circular.
- Repetir
- Repite el patrón; coloca las paradas dentro de un rango corto, como de 0 % a 10 %, para crear rayas.
Qué aspecto tiene el código generado
Los mismos dos colores, escritos por cada tipo. Las paradas se escriben siempre con una posición en porcentaje:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)La versión de Tailwind envuelve el mismo valor en una clase de valor arbitrario. Los espacios se convierten en guiones bajos y se quitan los espacios tras las comas:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]En la última línea de CSS el patrón se repite cada 10 % del elemento, lo que da rayas finas. En los degradados cónicos el ángulo es el punto donde empieza el barrido, y en los radiales los dos porcentajes son el centro.
Preguntas frecuentes
¿Qué navegadores admiten estos degradados?
Los degradados lineales, radiales y cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari, sin prefijos de proveedor.
¿Cómo hago un degradado transparente?
Escribe un color con canal alfa, como #00000000 para un negro totalmente transparente, en el campo de color de una parada.
¿Cómo uso la clase de Tailwind?
Añádela a la lista de clases de un elemento en Tailwind CSS 3 o 4. Usa un valor arbitrario, así que no hace falta configurar nada.
Privacidad
Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.