Digital / Web UI
Noise Gradient
تدرج مع حبيبات ناعمة يزيل النعومة البلاستيكية من صفحات الذكاء الاصطناعي.
Ng
الاستخدامات
- خلفيات صفحات
- بطاقات رئيسية
- كتل تحريرية
المعاملات
- grain opacity
- color depth
- contrast
- blend mode
- scale
AI Prompt
أنشئ noise gradient راقيا مع حبيبات واضحة لكن ناعمة وعمق لوني وتباين مناسب للنص.
ملاحظات Tailwind
استخدم gradients للون و pseudo-element مع repeating-radial-gradient للحبيبات.
ملاحظات الأداء
الحبيبات الثابتة في CSS خفيفة. أبق الشفافية منخفضة حتى لا يتضرر النص.
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
export function NoiseGradientBlock({ children }) {
return <div className="noise-gradient">{children}</div>;
}