Generador de Degradados Aleatorios

Una función JavaScript para generar degradados de 2 colores aleatorios basados en un string de entrada.

📦 Instalación

Puedes importar la función directamente desde Val Town:

import generarDegradadoAleatorio from "https://esm.town/v/eliezer516/gradiente-aleatorio";

🎨 Uso

Función principal

// Importar la función
import generarDegradadoAleatorio from "https://esm.town/v/eliezer516/gradiente-aleatorio";

// Generar un degradado aleatorio basado en un string
const degradado = generarDegradadoAleatorio("mi-string-base");
console.log(degradado); // "linear-gradient(45deg, #FF5733, #33FF57)"

// Usarlo en CSS
const elemento = document.getElementById('mi-elemento');
elemento.style.background = degradado;

Función para obtener solo los colores

import { obtenerColoresAleatorios } from "https://esm.town/v/eliezer516/gradiente-aleatorio";

const [color1, color2] = obtenerColoresAleatorios();
console.log(color1, color2); // "#FF5733" "#33FF57"

Generar múltiples degradados

import { generarMultiplesDegradados } from "https://esm.town/v/eliezer516/gradiente-aleatorio";

const degradados = generarMultiplesDegradados(5, "semilla");
degradados.forEach((d, i) => {
  console.log(`Degradado ${i + 1}:`, d);
});

🌐 Ejemplo HTML

Incluimos un archivo ejemplo.html que demuestra cómo usar la función:

<!DOCTYPE html>
<html>
<head>
    <title>Demo Degradados</title>
    <style>
        .gradiente {
            width: 200px;
            height: 200px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="gradiente" class="gradiente"></div>
    
    <script type="module">
        import generarDegradadoAleatorio from "https://esm.town/v/eliezer516/gradiente-aleatorio";
        
        const degradado = generarDegradadoAleatorio("ejemplo");
        document.getElementById('gradiente').style.background = degradado;
    </script>
</body>
</html>

🔧 Características

Aleatoriedad reproducible: Usando el string de entrada como semilla
Colores variados: Genera colores hexadecimales completamente aleatorios
Ángulos aleatorios: Degradados en cualquier dirección (0-360 grados)
Múltiples formatos: CSS listo para usar o colores individuales

📄 API

`generarDegradadoAleatorio(baseString: string): string`

Genera un degradado CSS lineal con dos colores aleatorios.

Parámetros:

baseString: Un string que se usa como base para generar colores reproducibles

Retorna: String CSS con formato linear-gradient(angulodeg, #color1, #color2)

`obtenerColoresAleatorios(): [string, string]`

Retorna dos colores hexadecimales aleatorios como un array.

Retorna: Array con dos strings de color hexadecimal

`generarMultiplesDegradados(cantidad: number, semilla?: string): string[]`

Genera múltiples degradados aleatorios.

Parámetros:

cantidad: Número de degradados a generar
semilla (opcional): String para generar degradados reproducibles

Retorna: Array de strings CSS con degradados

🎯 Ejemplos de uso

En aplicaciones web

// Cambiar fondo de página
document.body.style.background = generarDegradadoAleatorio("app-background");

// Crear tarjetas con fondos únicos
tarjetas.forEach((tarjeta, i) => {
  tarjeta.style.background = generarDegradadoAleatorio(`tarjeta-${i}`);
});

En React/Componentes

Create val
function TarjetaConFondo({ texto, id }) {
  const fondo = generarDegradadoAleatorio(`tarjeta-${id}`);
  
  return (
    <div style={{ 
      background: fondo,
      padding: '20px',
      borderRadius: '8px'
    }}>
      {texto}
    </div>
  );
}

🔗 Enlaces útiles

📝 Licencia

Este código es de uso libre para cualquier propósito.