Volver

Diseño y Recursos

Generador CSS de superposición de ruido

Genera estilos CSS para superposiciones de ruido.

Categoría

Diseño y Recursos

Etiquetas

noise overlayCSStextureui
Más herramientas de Diseño y Recursos
Entrada

Generador CSS de superposición de ruido

noise overlayCSStextureui
Ejemplos rápidos
Salida

Generador de 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);
}
En vivo Vista previa
Live canvas