Brought to you by web.dev

Houdini.how

Worklet Library

@bramus

css-houdini-circles

by @bramus

  1. .demo {
  2. background: paint(circles)
  3. }
@Una

extra-confetti

by @Una

  1. .demo {
  2. background: paint(extra-confetti)
  3. }
@Hazmi

curved-line

by @Hazmi


  1. .demo {
  2. background: paint(curved-line);
  3. }
@malchata

bytemare

by @malchata

  1. .demo {
  2. background-image: paint(bytemare);
  3. }
@arnellebalane

houdini-paint-dot-grid

by @arnellebalane

  1. .demo {
  2. background: paint(dot-grid);
  3. }
@AKAspanion

css-houdini-bubbles

by @AKAspanion

  1. .demo {
  2. background: paint(bubbles)
  3. }
@iamvdo

houdini-avatar-polygon

by @iamvdo

Hello!

  1. .demo {
  2. padding: 3rem;
  3. background: var(--polygon-bg);
  4. -webkit-mask-image: paint(avatar-polygon);
  5. mask-image: paint(avatar-polygon);
  6. }
Surma

@houdini-modules/border-radius-reverse

by Surma

Content!

  1. .demo {
  2. border: calc(var(--border-radius-reverse) * 1px) solid transparent;
  3. border-image: paint(border-radius-reverse);
  4. border-image-slice: var(--border-radius-reverse);
  5. }
@iamvdo

houdini-tooltip

by @iamvdo

Hello!

  1. .demo {
  2. padding: 1rem;
  3. background: var(--tooltip-bg);
  4. border-bottom: 1px solid transparent;
  5. border-image-slice: 0 0 100% 0;
  6. border-image-width: var(--border-width);
  7. border-image-outset: var(--border-width);
  8. border-image-source: paint(tooltip);
  9. }
Conrad Sollitt

css-houdini-fractals

by Conrad Sollitt

  1. .demo {
  2. background-image: paint(fractals)
  3. }
Jhey Tompkins

houdini-tesla

by Jhey Tompkins

  1. .demo {
  2. background: paint(tesla-coil);
  3. }
@jerosoler

cornerbox

by @jerosoler

  1. .demo {
  2. background: paint(cornerbox)
  3. }
@Una

angled-corners

by @Una

  1. .demo {
  2. background: paint(angled-corners);
  3. }
Note: Partial demo for compatibility. For full effect using arguments, view Demo with Experimental Web Platform Features flag on.
@bramus

css-houdini-voronoi

by @bramus

  1. .demo {
  2. background: paint(voronoi)
  3. }
@andreban

houdini-alien

by @andreban

  1. .demo {
  2. background-image: paint(alien)
  3. }
@Una

extra-sparkles

by @Una

  1. .demo {
  2. background: paint(extra-sparkles)
  3. }
@argyleink

houdini-static-gradient

by @argyleink

  1. .demo {
  2. background: paint(static-gradient)
  3. }
@twerske

houdini-glow-lights

by @twerske

  1. .demo {
  2. background: paint(glow-lights);
  3. }
Jhey Tompkins

houdini-noise

by Jhey Tompkins

  1. .demo {
  2. background: paint(noise);
  3. }
@nucliweb

css-houdini-connections

by @nucliweb

  1. .demo {
  2. background: paint(connections)
  3. }
@Una

extra-underline

by @Una

Underlined

  1. .demo {
  2. background: paint(extra-superUnderline);
  3. }
Zhenyang

houdini-leaf

by Zhenyang

  1. .demo {
  2. background-image: paint(leaf);
  3. }
@Una

extra-scalloped-border

by @Una

Scalloped

  1. .demo {
  2. background: paint(extra-scallopedBorder);
  3. }
@nucliweb

css-houdini-lines

by @nucliweb

  1. .demo {
  2. background: paint(lines)
  3. }
@argyleink

houdini-powdered-gradient

by @argyleink

  1. .demo {
  2. background: paint(powdered-gradient), #111
  3. }
@malchata

parallelowow

by @malchata

  1. .demo {
  2. background: paint(parallelowow), var(--parallelowow-base-color);
  3. }