العودة إلى الخريطة
Digital / Web UI

Noise Gradient

تدرج مع حبيبات ناعمة يزيل النعومة البلاستيكية من صفحات الذكاء الاصطناعي.

الحالة: جاهزNg
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>;
}