Generador de Gradientes CSS Pro y Visual

Guía Paso a Paso para Crear tu Gradiente Perfecto

1. Selecciona el Tipo de Gradiente: En el panel de controles (columna izquierda), utiliza los botones "Lineal", "Radial" o "Cónico" para elegir el tipo de gradiente base que deseas crear. Si necesitas un patrón que se repita, marca la casilla "Repetir Gradiente".
2. Ajusta las Opciones Específicas del Tipo: Según el tipo seleccionado, aparecerán diferentes controles:
   • Lineal: Define el "Ángulo" usando el slider, arrastrando la línea en el visualizador circular, o seleccionando una "Dirección Rápida" (ej. "Arriba Der.").
   • Radial: Elige la "Forma" (elipse/círculo), el "Tamaño" (usando palabras clave estándar de CSS como 'farthest-corner') y ajusta la "Posición X" y "Posición Y" del centro del gradiente con los sliders.
   • Cónico: Establece el ángulo "Desde Ángulo" de inicio de la rotación y la "Posición X" y "Posición Y" del centro del cono.
3. Gestiona las Paradas de Color (Color Stops): Esta es la parte más interactiva:
   • Barra de Paradas (#colorStopsBarContainer): Esta barra visualiza tu gradiente actual. Haz clic en cualquier punto vacío de la barra para añadir una nueva parada de color en esa posición.
   • Seleccionar Parada: Cada color en tu gradiente está representado por un "handle" (círculo) en la barra. Haz clic en un handle para seleccionarlo. El handle activo se resaltará visualmente.
   • Mover Parada: Una vez seleccionado, puedes arrastrar un handle a lo largo de la barra para cambiar su posición porcentual en el gradiente. Alternativamente, usa el slider "Posición de Parada" que aparece debajo cuando un handle está activo.
   • Cambiar Color de Parada: Con un handle seleccionado, usa el selector de color interactivo (#colorPickerWrapper) para elegir un nuevo color. También puedes ingresar un valor de color válido (HEX, RGBA, HSLA) directamente en el campo de texto (#selectedColorValue).
   • Eliminar Parada: Con un handle seleccionado, haz clic en el botón de la papelera () junto al campo de valor de color. Recuerda que necesitas al menos dos paradas para un gradiente.
   • Añadir Nueva Parada (Botón): Usa el botón " Añadir Parada de Color" para agregar una nueva parada (generalmente al 50% o cerca de la parada activa si hay una).
4. Explora Gradientes Predefinidos: En la sección "Gradientes Predefinidos", haz clic en cualquiera de las miniaturas para cargar instantáneamente una configuración de gradiente lista para usar. Puedes modificarla a tu gusto después.
5. Personaliza la Previsualización: En el panel de la derecha, debajo del área de previsualización principal:
   • Marca "Aplicar a Texto" para ver cómo se ve el gradiente sobre un texto de ejemplo. Puedes cambiar el texto en el campo que aparece.
   • Cambia el "Fondo" de la previsualización (Ajedrez, Blanco, Negro, etc.) para ver cómo contrasta tu gradiente.
   • Ajusta el "Ancho" y "Alto" del elemento de previsualización para simular diferentes tamaños de contenedor.
6. Obtén tu Código CSS: El código CSS background-image se genera automáticamente en el área de texto "Código CSS Generado". Haz clic en el botón " Copiar CSS" para usarlo directamente en tus hojas de estilo. Puedes marcar "Incluir prefijos antiguos" si necesitas compatibilidad con navegadores muy desactualizados (generalmente no es necesario hoy en día).

Explorando los Tipos de Gradientes CSS

CSS proporciona una potente funcionalidad de gradientes que te permite crear fondos complejos y visualmente atractivos sin necesidad de imágenes. Esta herramienta soporta los principales tipos:

1. Gradientes Lineales (linear-gradient())

Un gradiente lineal crea una transición de colores a lo largo de una línea recta. Puedes definir la dirección de esta línea mediante un ángulo (0deg es hacia arriba, 90deg es hacia la derecha, etc.) o usando palabras clave como to top, to bottom left.

Sintaxis Clave: linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

Ejemplo Simple: linear-gradient(135deg, #FF7E5F, #FEB47B); crea una transición diagonal desde naranja rojizo a un naranja más claro.

2. Gradientes Radiales (radial-gradient())

Un gradiente radial emana desde un punto central (el "origen del gradiente") hacia afuera. La forma de la transición puede ser un círculo (circle) o una elipse (ellipse, por defecto). Puedes especificar el tamaño del gradiente (usando palabras clave como farthest-corner, closest-side, o longitudes explícitas) y la posición de su centro.

Sintaxis Clave: radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

Ejemplo Simple: radial-gradient(circle at center, white, blue); crea un círculo blanco en el centro que se desvanece a azul hacia los bordes.

3. Gradientes Cónicos (conic-gradient())

Un gradiente cónico presenta colores que realizan una transición alrededor de un punto central, como las agujas de un reloj o un gráfico de tipo pastel. Puedes especificar un ángulo de inicio para la rotación (from <angle>) y la posición del centro del cono.

Sintaxis Clave: conic-gradient( [ from <angle> ]? [ at <position> ]? , <angular-color-stop-list> )

Ejemplo Simple: conic-gradient(from 0deg, red, yellow, green, blue, red); crea un espectro de colores que rota 360 grados.

4. Gradientes Repetitivos (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient())

Estas funciones toman los mismos argumentos que sus contrapartes no repetitivas, pero la secuencia de paradas de color especificada se repite indefinidamente para llenar el área del fondo. Para que la repetición sea visible, el patrón definido por las paradas de color debe tener un tamaño o una extensión finita dentro del rango del gradiente.

Ejemplo Simple: repeating-linear-gradient(45deg, #f06, #f06 10px, #0cf 10px, #0cf 20px); crea franjas diagonales de color rosa y cian.

Nuestra herramienta te permite alternar fácilmente entre la versión normal y la repetitiva de cada tipo de gradiente y experimentar con las paradas de color para lograr patrones interesantes.

Entendiendo las Paradas de Color (Color Stops)

Las paradas de color son el corazón de cualquier gradiente CSS. Definen los colores específicos que componen tu gradiente y, crucialmente, la posición donde cada color alcanza su máxima intensidad o donde comienza una transición hacia el siguiente color.

¿Qué es una Parada de Color?

Una parada de color consiste en dos partes principales:

• Un valor de color: Puede ser cualquier color CSS válido (nombre de color como red, HEX como #FF0000, RGB/RGBA como rgb(255, 0, 0) o rgba(255, 0, 0, 0.5) para opacidad, HSL/HSLA). Nuestra herramienta usa el selector iro.js que te permite definir colores fácilmente y obtener su representación en RGBA.
• Una posición (opcional): Indica dónde se coloca esa parada a lo largo del eje del gradiente. Se expresa como un porcentaje (de 0% a 100%) o una longitud. Si no se especifica, los navegadores distribuyen las paradas uniformemente. En nuestra herramienta, puedes ajustar la posición con un slider o arrastrando el "handle" en la barra visual.

Ejemplo: En linear-gradient(red 0%, blue 50%, green 100%);

• red 0% es la primera parada: el gradiente es completamente rojo al inicio.
• blue 50% es la segunda parada: en el punto medio del gradiente, el color es completamente azul. La transición de rojo a azul ocurre entre el 0% y el 50%.
• green 100% es la tercera parada: al final del gradiente, el color es completamente verde. La transición de azul a verde ocurre entre el 50% y el 100%.

Gestión de Paradas en esta Herramienta:

• Añadir Paradas: Haz clic directamente en la barra visual de gradiente (#colorStopsBarContainer) en la posición deseada, o usa el botón " Añadir Parada de Color".
• Seleccionar y Modificar: Haz clic en un "handle" (círculo) en la barra para activarlo. Una vez activo:
  • Usa el selector de color (iro.js) para cambiar su color.
  • Ingresa un valor de color directamente en el campo de texto (#selectedColorValue).
  • Ajusta su posición con el slider (#colorStopPosition) o arrastrando el handle en la barra.
• Eliminar Paradas: Con una parada seleccionada, haz clic en el botón de la papelera (). Se requieren al menos dos paradas para un gradiente.
• Transiciones Nítidas: Para crear una línea de color nítida en lugar de una transición suave, define dos paradas de color con el mismo color pero en posiciones diferentes, o dos paradas de color diferentes en la misma posición. Ejemplo: red 0%, red 49%, blue 51%, blue 100% (casi una línea) o red 50%, blue 50% (línea nítida en el centro).

Transparencia (Canal Alfa):

Cada parada de color puede tener un valor de opacidad (alfa). Esto te permite crear gradientes que se desvanecen a transparente o que se superponen de manera interesante con otros fondos. En el selector iro.js, el slider de "Alpha" controla esto. Los formatos de color como RGBA (ej., rgba(255,0,0,0.5) para rojo al 50% de opacidad) o HSLA soportan transparencia.

Preguntas Frecuentes (FAQ)

background-image: TU_GRADIENTE_AQUI;
-webkit-background-clip: text;
background-clip: text;
color: transparent;

background-image: linear-gradient(...), radial-gradient(...);