Zurück

Design und Assets

Noise-Overlay-CSS-Generator

Erzeuge CSS-Stile für Noise-Overlays.

Kategorie

Design und Assets

Tags

noise overlaycsstextureui
Mehr aus Design und Assets
Eingabe

Noise-Overlay-CSS-Generator

noise overlaycsstextureui
Schnellbeispiele
Ausgabe

Noise Overlay CSS Generator

.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 Vorschau
Live canvas