Digital / Web UI
Noise Gradient
Subtle grain वाला gradient, जो AI pages की sterile smoothness हटाता है.
Ng
Usage
- Page backgrounds
- Hero cards
- Editorial blocks
Parameters
- grain opacity
- color depth
- contrast
- blend mode
- scale
AI Prompt
Visible but subtle grain, layered color depth और text-friendly contrast वाला refined noise gradient बनाएं.
Tailwind notes
Color के लिए gradients और grain के लिए repeating-radial-gradient pseudo-element उपयोग करें.
Performance notes
Static CSS grain हल्का है. Text muddy न हो इसलिए opacity low रखें.
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>;
}