Saltar al contenido
GlassMarshmallow
Volver: Herramientas

Efecto de televisor

Líneas horizontales, grano, bordes oscurecidos y esquinas curvas, como una tele antigua: el efecto de la portada de esta web en modo oscuro. Activa las capas que quieras, ajústalas y copia el CSS.

Canal 1

Así se ve el texto con el efecto de televisor.

Vista previa
65 %
2 px
16 %
70 %
45 %
85 %
6 %
Textos de ejemplo
/* Generado con GlassMarshmallow */

/* Pon la clase efecto-tv en el bloque que quieras (una portada, una imagen, una sección) */

.efecto-tv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.efecto-tv::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 0.125em, rgba(0, 0, 0, 0.65) 0.125em 0.25em),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
  border-radius: 6% / 9%;
  box-shadow: inset 0 0 2.5em 1.125em rgba(0, 0, 0, 0.85);
}

.efecto-tv::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -0.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.16;
  mix-blend-mode: screen;
}