رجوع

التصميم والموارد

مولد CSS لتراكب التشويش

إنشاء أنماط CSS لتراكبات التشويش.

التصنيف

التصميم والموارد

الوسوم

noise overlayCSStextureui
المزيد من التصميم والموارد
الإدخال

مولد CSS لتراكب التشويش

noise overlayCSStextureui
أمثلة سريعة
الإخراج

مولد Noise Overlay CSS

.noise-overlay {
  position: relative;
  isolation: isolate;
  min-height: 180px;
  border-radius: 12px;
  background: linear-gradient(180deg, #334155, color-mix(in srgb, #334155 72%, black));
  overflow: hidden;
}

.noise-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    repeating-radial-gradient(#0f172a 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, color-mix(in srgb, #334155 30%, transparent) 0 2px, transparent 2px 4px);
}
مباشر معاينة
Live canvas