Digital / Web UI
Noise Gradient
Un gradiente con grano sutil que elimina la suavidad estéril de páginas generadas por IA.
Ng
Usos
- Fondos
- Hero cards
- Bloques editoriales
Parámetros
- grain opacity
- color depth
- contrast
- blend mode
- scale
Prompt IA
Crea un noise gradient refinado con grano visible pero sutil, profundidad de color y buena legibilidad.
Notas Tailwind
Usa gradientes para color y un pseudo-elemento con repeating-radial-gradient para grano.
Rendimiento
El grano CSS estático es ligero. Mantén baja la opacidad para no ensuciar el texto.
CSS
.noise-gradient {
position: relative;
background:
radial-gradient(circle at 18% 16%, rgba(70, 220, 180, .35), transparent 28%),
linear-gradient(135deg, #14120f, #20231d 42%, #0d1112);
}
.noise-gradient::after {
content: "";
position: absolute;
inset: 0;
opacity: .18;
background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.35) 0 1px, transparent 1px 5px);
}Ejemplo React
export function NoiseGradientBlock({ children }) {
return <div className="noise-gradient">{children}</div>;
}