\n \n \n\n\n```\n\n## 🔧 Características\n\n- **Aleatoriedad reproducible**: Usando el string de entrada como semilla\n- **Colores variados**: Genera colores hexadecimales completamente aleatorios\n- **Ángulos aleatorios**: Degradados en cualquier dirección (0-360 grados)\n- **Múltiples formatos**: CSS listo para usar o colores individuales\n\n## 📄 API\n\n### `generarDegradadoAleatorio(baseString: string): string`\nGenera un degradado CSS lineal con dos colores aleatorios.\n\n**Parámetros:**\n- `baseString`: Un string que se usa como base para generar colores reproducibles\n\n**Retorna:** String CSS con formato `linear-gradient(angulodeg, #color1, #color2)`\n\n### `obtenerColoresAleatorios(): [string, string]`\nRetorna dos colores hexadecimales aleatorios como un array.\n\n**Retorna:** Array con dos strings de color hexadecimal\n\n### `generarMultiplesDegradados(cantidad: number, semilla?: string): string[]`\nGenera múltiples degradados aleatorios.\n\n**Parámetros:**\n- `cantidad`: Número de degradados a generar\n- `semilla` (opcional): String para generar degradados reproducibles\n\n**Retorna:** Array de strings CSS con degradados\n\n## 🎯 Ejemplos de uso\n\n### En aplicaciones web\n```javascript\n// Cambiar fondo de página\ndocument.body.style.background = generarDegradadoAleatorio(\"app-background\");\n\n// Crear tarjetas con fondos únicos\ntarjetas.forEach((tarjeta, i) => {\n tarjeta.style.background = generarDegradadoAleatorio(`tarjeta-${i}`);\n});\n```\n\n### En React/Componentes\n```jsx\nfunction TarjetaConFondo({ texto, id }) {\n const fondo = generarDegradadoAleatorio(`tarjeta-${id}`);\n \n return (\n

\n {texto}\n

\n );\n}\n```\n\n## 🔗 Enlaces útiles\n\n- [Ver código fuente en Val Town](https://www.val.town/x/eliezer516/gradiente-aleatorio/code/)\n- [Probar el ejemplo interactivo](https://www.val.town/static/eliezer516/gradiente-aleatorio/ejemplo.html)\n- [Documentación de gradientes CSS en MDN](https://developer.mozilla.org/es/docs/Web/CSS/gradient)\n\n## 📝 Licencia\n\nEste código es de uso libre para cualquier propósito.","deleted","label","children",[],[154],{"_104":173,"_96":100,"_155":174,"_157":-5,"_158":140,"_159":175,"_160":161,"_106":176,"_101":32,"_163":164,"_165":177,"_167":22,"_168":-5,"_169":178,"_99":179},"a9e38950-d92c-11f0-a86f-42dde27851f2","a9e38a04-d92c-11f0-a86f-42dde27851f2",2,["D",1765744630048],"\n\n\n \n \n Generador de Degradados Aleatorios\n \n\n\n

🎨 Generador de Degradados Aleatorios

\n \n

\n \n \n \n

\n \n

Degradado Actual:

\n Haz clic en \"Generar Degradado\"\n

\n \n

#000000

\n \n

\n Código CSS:
\n background: linear-gradient(0deg, #000000, #ffffff);\n

\n \n

\n\n \n\n",[],[100],{"_104":181,"_96":182,"_155":183,"_157":-5,"_158":140,"_159":184,"_160":161,"_106":185,"_101":32,"_163":186,"_165":187,"_167":22,"_168":-5,"_169":188,"_99":189},"86c1f876-d92c-11f0-8ea2-42dde27851f2","main.ts","86c1f8f8-d92c-11f0-8ea2-42dde27851f2",1,["D",1765744571107],"script","// Función para generar un degradado aleatorio de 2 colores\n// Parámetro: baseString - cualquier string que puede ser usado como semilla\n// Retorna: un string CSS con un gradiente lineal de 2 colores aleatorios\n\nexport default function generarDegradadoAleatorio(baseString: string): string {\n // Función para generar un color hexadecimal aleatorio\n function generarColorHexAleatorio(): string {\n const letras = '0123456789ABCDEF';\n let color = '#';\n for (let i = 0; i < 6; i++) {\n // Usar baseString como semilla para hacerlo reproducible\n const randomIndex = Math.floor(\n (baseString.charCodeAt(i % baseString.length) * Date.now()) % 16\n );\n color += letras[randomIndex];\n }\n return color;\n }\n \n // Función alternativa para generar colores más variados\n function generarColorRandom(): string {\n // Crear un color aleatorio RGB\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n \n // Convertir a hexadecimal\n const toHex = (n: number) => {\n const hex = n.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n \n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n }\n \n // Generar dos colores aleatorios\n const color1 = generarColorRandom();\n const color2 = generarColorRandom();\n \n // Generar un ángulo aleatorio para el degradado (0-360 grados)\n const angulo = Math.floor(Math.random() * 360);\n \n // Retornar el string del gradiente CSS\n return `linear-gradient(${angulo}deg, ${color1}, ${color2})`;\n}\n\n// Función para generar múltiples degradados\n// Parámetro: cantidad - número de degradados a generar\n// Parámetro: semilla - string opcional para generar degradados reproducibles\nexport function generarMultiplesDegradados(\n cantidad: number, \n semilla?: string\n): string[] {\n const degradados: string[] = [];\n \n for (let i = 0; i < cantidad; i++) {\n // Si hay semilla, combinarla con el índice para variar\n const baseString = semilla ? `${semilla}-${i}` : `random-${Date.now()}-${i}`;\n degradados.push(generarDegradadoAleatorio(baseString));\n }\n \n return degradados;\n}\n\n// Función para obtener solo los colores sin el formato CSS\nexport function obtenerColoresAleatorios(): [string, string] {\n function generarColorRandom(): string {\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n \n const toHex = (n: number) => {\n const hex = n.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n \n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n }\n \n return [generarColorRandom(), generarColorRandom()];\n}",[],[182],"files",[152,172,180],"counts",{"_194":32,"_195":184,"_196":32,"_197":198,"_201":202},"pulls","branches","forks","envVars",{"_199":32,"_200":32},"count","emptyCount","connections",{"_199":32,"_203":32},"unfilledCount","contents",[],{"_104":173,"_96":100,"_155":174,"_157":-5,"_158":140,"_159":175,"_160":161,"_106":207,"_101":32,"_163":164,"_165":177,"_167":22,"_168":-5,"_99":208},["D",1765744630048],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":44,"_99":100,"_102":217,"_164":222,"_225":226,"_229":230,"_233":-7,"_234":32,"_235":22},{"_104":105,"_96":97,"_106":218,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":219,"_134":220,"_137":221,"_149":22},["D",1765744571096],{"_94":95,"_132":133},{"_94":95,"_136":133,"_14":115},{"_101":139,"_96":44,"_104":140,"_141":105,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},{"_104":173,"_96":100,"_155":174,"_157":-5,"_158":140,"_159":175,"_160":161,"_106":223,"_101":32,"_163":164,"_165":177,"_167":22,"_168":-5,"_99":224},["D",1765744630048],[100],"history",[227],{"_104":173,"_158":140,"_155":174,"_96":100,"_165":177,"_163":164,"_101":32,"_157":-5,"_106":228,"_159":175,"_168":-5},["D",1765744630048],"versions",[231],{"_164":227,"_232":-5},"previous","versionNumber","page","hasNext","actionData","errors"]

eliezer516

gradiente-aleatorio

History for ejemplo.html