Skip to content
GlassMarshmallow
Back: Tools

TV effect

Horizontal lines, grain, darkened edges and curved corners, like an old TV: the effect on this site’s home page in dark mode. Turn on the layers you want, adjust them and copy the CSS.

Channel 1

This is how text looks with the TV effect.

Preview
65 %
2 px
16 %
70 %
45 %
85 %
6 %
Sample texts
/* Generated with GlassMarshmallow */

/* Add the efecto-tv class to the block you want (a hero, an image, a section) */

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