INTERACTION_024

Grain Overlay.

An inline SVG fractal noise texture at ~3% opacity fixed over the page gives dark surfaces a tactile, printed quality.

CATEGORY: Background
COMPLEXITY: Easy
TECH: CSS
PLATFORM: Both
PERFORMANCE: Light

LIVE PLAYGROUND

TEXTURE / 3%

CSS / CSS

.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

IF YOU LIKE THIS, STEAL THESE TOO.

All effects

STRUCTURE / 56PX

INTERACTION_023CSS

Tech Grid

Faint technical grid with a radial fade.

Background / LightView

AMBIENT LIGHT

INTERACTION_013CSS + JS

Mouse Glow

Large ambient light that trails the pointer across a section.

Mouse / MediumView

LOVABLECURSORBOLTV0REPLITWINDSURFLOVABLECURSORBOLTV0REPLITWINDSURF

INTERACTION_022CSS

Logo Marquee

Infinite horizontal scroll with edge fades.

Background / LightView

GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView