Digital / Web UI
Noise Gradient
A gradient that uses subtle grain to remove sterile smoothness and make AI pages feel more designed.
Ng
Usage
- Page backgrounds
- Hero cards
- Editorial blocks
Adjustable parameters
- grain opacity
- color depth
- contrast
- blend mode
- scale
AI Prompt
Create a refined noise gradient with visible but subtle grain, layered color depth, and no plastic smoothness. Keep it quiet enough for text.
Tailwind notes
Use gradients for color and a pseudo-element with repeating-radial-gradient for grain.
Performance notes
CSS grain is lightweight when static. Keep opacity low to avoid muddy text.
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);
}React example
export function NoiseGradientBlock({ children }) {
return <div className="noise-gradient">{children}</div>;
}