Idé 01 · CSS Effektbibliotek

Én kasse. Uanede muligheder.

Alt herunder er ren CSS — ingen JavaScript, ingen biblioteker. Udgangspunktet er altid det samme simple element. Det er koden der gør det levende.

01SVG Filtre
POLITIKEN
Turbulens-kanterfeTurbulence
SVG-filter der gør kanter organiske og urolige. Brug på bokse, billeder eller tekst for en håndtegnet effekt.
↓ Vis kode
filter: url(#turbulens);

<feTurbulence baseFrequency="0.04">
  <animate dur="5s"
    values="0.04;0.08;0.04"/>
</feTurbulence>
<feDisplacementMap scale="8"/>
Dråbe-glowdrop-shadow filter
Lagdelte drop-shadow filtre bygger et glødende halo op. Fungerer på alle elementer — også PNG'er med transparent baggrund.
↓ Vis kode
filter:
  drop-shadow(0 0 4px currentColor)
  drop-shadow(0 0 18px currentColor)
  drop-shadow(0 0 36px currentColor);
animation: glow-pulse 2.5s infinite;
FLYDENDE
Flydende forvrængningfeDisplacementMap
En animeret turbulenskilde forskyber pixels som bølger i vand. Virker særligt godt på stor tekst og fotografier.
↓ Vis kode
filter: url(#liquid);

<feTurbulence
  baseFrequency="0.02 0.012"
  numOctaves="3">
  <animate dur="8s"
    values="0.02;0.046;0.02"/>
</feTurbulence>
<feDisplacementMap scale="18"/>
SIGNAL
RGB-splitfeColorMatrix
Tre farvekanaler isoleres, forskydes og blendes sammen igen. Det giver en teknisk, analog fejlfornemmelse uden canvas eller JavaScript.
↓ Vis kode
<feColorMatrix result="red"
  values="1 0 0 0 0 ..."/>
<feOffset in="red" dx="-3"/>
<feOffset in="blue" dx="3"/>
<feBlend mode="screen"/>

.title {
  filter: url(#rgb-split);
}
PAPIR
Papir-relieffeDiffuseLighting
Fractal noise bruges som bump-map, og feDiffuseLighting giver en trykt, fysisk overflade. God til dokumenter, arkivkort og avisgrafik.
↓ Vis kode
<feTurbulence
  type="fractalNoise"
  baseFrequency="0.8"
  numOctaves="4" />
<feDiffuseLighting
  surfaceScale="1.8">
  <feDistantLight
    azimuth="45"
    elevation="55" />
</feDiffuseLighting>
02Clip-path
Blob-morphborder-radius
Otte border-radius-værdier animeres uafhængigt. Resultatet er en organisk form der aldrig sætter sig til ro.
↓ Vis kode
@keyframes blob-morph {
  0%,100% {
    border-radius:
      60% 40% 30% 70% /
      60% 30% 70% 40%;
  }
  50% {
    border-radius:
      50% 30% 60% 40% /
      30% 50% 60% 50%;
  }
}
Formmorphclip-path: polygon
Samme element skifter identitet: diamant, firkant, femkant, stjerne, cirkel. clip-path interpolerer automatisk mellem koordinaterne.
↓ Vis kode
@keyframes form-morph {
  0%  { clip-path:
    polygon(50% 0%, 100% 50%,
      50% 100%, 0% 50%); }
  60% { clip-path:
    polygon(50% 0%, 61% 35%,
      98% 35%, 68% 57%,
      79% 91%, 50% 70%,
      21% 91%, 32% 57%,
      2% 35%, 39% 35%); }
  80% { clip-path:
    circle(45% at 50% 50%); }
}
SKJULT
AFSLØRET
Diagonal revealclip-path: polygon
Et skråt polygon fejder henover elementet og afslører indholdet. Klassisk teknik til titel-reveals og overgange i video og web.
↓ Vis kode
@keyframes wipe {
  0% {
    clip-path: polygon(
      -15% 0%, 0% 0%,
      -5% 100%, -20% 100%);
  }
  50% {
    clip-path: polygon(
      85% 0%, 115% 0%,
      110% 100%, 80% 100%);
  }
  100% {
    clip-path: polygon(
      115% 0%, 115% 0%,
      115% 100%, 115% 100%);
  }
}
03Masks & Kanter
MASK
Mask-sweepmask-image
En flyttende gradient-mask bestemmer, hvor elementet må være synligt. Det giver en reveal-effekt uden ekstra wrapper eller JavaScript.
↓ Vis kode
mask-image: linear-gradient(
  90deg,
  transparent,
  #000 32%,
  #000 68%,
  transparent
);
mask-size: 220% 100%;
animation: mask-sweep 3.2s infinite;
Halftone-maskradial-gradient mask
En gentaget radial-gradient fungerer som rastermaske. Effekten minder om avistryk, men er stadig ét element med CSS.
↓ Vis kode
mask-image: radial-gradient(
  circle,
  #000 48%,
  transparent 51%
);
mask-size: 13px 13px;
animation: halftone 4s infinite;
RAMME
Border-image gradientborder-image
border-image kan bruge gradienter som kilde. Med en registreret vinkel-variabel kan kanten animeres uden pseudo-elementer.
↓ Vis kode
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
border: 9px solid transparent;
border-image:
  conic-gradient(
    from var(--angle),
    red, gold, blue, red) 1;
HJØRNER
Hjørnemarkørermultiple backgrounds
Fire lineære gradients tegner kun hjørnerne af en ramme. En enkel måde at markere fokusfelter, fotos eller datakort på.
↓ Vis kode
background:
  linear-gradient(90deg,
    gold 0 26px,
    transparent 0 calc(100% - 26px),
    gold 0) top / 100% 2px no-repeat,
  linear-gradient(gold 0 26px,
    transparent 0 calc(100% - 26px),
    gold 0) left / 2px 100% no-repeat;
04Blend Modes & Glas
GLAS
Glasmorfismebackdrop-filter
backdrop-filter: blur() slører alt bagved elementet — uanset om det er tekst, billeder eller animationer. Kræver noget synligt bagved.
↓ Vis kode
backdrop-filter:
  blur(14px) saturate(180%);
background:
  rgba(255,255,255,0.15);
border:
  1px solid rgba(255,255,255,0.35);
Mix-blend farvermix-blend-mode
To elementer blandes visuelt som i Photoshop. multiply giver subtraktiv farvemix — overlappet bliver mørkere end begge originaler.
↓ Vis kode
.overlay {
  mix-blend-mode: multiply;
}

/* Andre muligheder:
   screen, overlay,
   difference, luminosity */
053D & Perspektiv
FORSIDE
BAGSIDE
KortvendtrotateY + backface
Et element med to sider. backface-visibility: hidden skjuler bagsiden indtil den er vendt mod skærmen. Ren CSS, ingen JavaScript.
↓ Vis kode
.scene { perspective: 500px; }
.inner {
  transform-style: preserve-3d;
  animation: flip 4.5s infinite;
}
.back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
@keyframes flip {
  50% { transform: rotateY(180deg); }
}
3D TILT
Perspektiv-tiltrotateX + rotateY
Kombinerede rotationer på X og Y-aksen med perspektivdybde. Normalt styret af musebevægelse — her kører det som CSS-animation.
↓ Vis kode
@keyframes tilt-3d {
  20% {
    transform:
      perspective(400px)
      rotateX(12deg)
      rotateY(18deg);
  }
  60% {
    transform:
      perspective(400px)
      rotateX(14deg)
      rotateY(-12deg);
  }
}
CSS Terningtransform-style: preserve-3d
Seks flader positioneret med translateZ og rotateY/X. preserve-3d er nøgleegenskaben der lader børn eksistere i forældrens 3D-rum.
↓ Vis kode
.cube {
  transform-style: preserve-3d;
}
.front {
  transform: translateZ(27px);
}
.back {
  transform:
    rotateY(180deg) translateZ(27px);
}
.left {
  transform:
    rotateY(-90deg) translateZ(27px);
}
06Partikler & Bevægelse
CSS Partikler@keyframes + custom properties
Mange simple elementer med individuelle CSS-variabler til position, størrelse, farve og timing. Ingen JavaScript — kun staggerede keyframes.
↓ Vis kode
.particle {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--size);
  animation:
    float var(--dur) var(--delay)
    ease-in-out infinite alternate;
}
@keyframes float {
  to {
    transform:
      translate(var(--tx), var(--ty))
      scale(var(--sc));
  }
}
Sonar-ringeanimation-delay
Tre identiske ringe med forskudte animation-delay. Illusionen om kontinuerlig bevægelse fra centrum opstår af de staggerede gentagelser alene.
↓ Vis kode
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid red;
  animation: expand 2.8s
    ease-out infinite;
}
.ring:nth-child(2) {
  animation-delay: 0.93s;
}
.ring:nth-child(3) {
  animation-delay: 1.86s;
}
@keyframes expand {
  0%   { width:10px; opacity:1; }
  100% { width:120px; opacity:0; }
}
07Tekst
Tekst
Gradient tekstbackground-clip: text
En gradient bruges som baggrundsfarve og klippes til bogstaverne. background-size og animation giver den glidende bevægelse.
↓ Vis kode
background: linear-gradient(
  90deg,
  #ff6b9d, #c0001a,
  #4488ff, #ff6b9d);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shift 4s linear infinite;
NEON
Neon glowtext-shadow
Fem lagdelte text-shadows bygger intensiteten op fra tæt til fjern. Flicker-animationen imiterer et gammelt rørskilt der kæmper for signalet.
↓ Vis kode
text-shadow:
  0 0 6px #fff,
  0 0 12px #fff,
  0 0 24px #ff6b9d,
  0 0 48px #ff6b9d,
  0 0 80px #ff6b9d;

/* Animationen fjerner kortvarigt
   alle shadows for flicker-effekt */
KODE
Konturtekst-webkit-text-stroke
Tekst reduceret til sin kontur. Kombiner med gradient-baggrunde eller billeder bagved for et gennemsigtigt vindue-trick.
↓ Vis kode
-webkit-text-stroke: 2px white;
color: transparent;

/* Animér stroke-bredde/-farve: */
@keyframes stroke-pulse {
  50% {
    -webkit-text-stroke: 3px red;
  }
}
@property
Animeret gradient-kantCSS Houdini
@property registrerer en CSS-variabel med en type. Browseren kan nu interpolere den som en rigtig vinkel og animere conic-gradient direkte.
↓ Vis kode
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.border {
  background: conic-gradient(
    from var(--angle),
    #ff6b9d, #c0001a, #4488ff);
  animation: spin 3s linear infinite;
}
@keyframes spin {
  to { --angle: 360deg; }
}