Générateur CSS de superpositions bruitées

.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);
}