Brought to you by web.dev

Houdini.how

Worklet Library


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

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. }
  1. .demo {
  2. background: paint(extra-sparkles)
  3. }
  1. .demo {
  2. background-image: paint(fractals)
  3. }
  1. .demo {
  2. background: paint(powdered-gradient), #111
  3. }
  1. .demo {
  2. background: paint(voronoi)
  3. }
  1. .demo {
  2. background: paint(glow-lights);
  3. }
  1. .demo {
  2. background: paint(dot-grid);
  3. }
  1. .demo {
  2. background: paint(connections)
  3. }
  1. .demo {
  2. background-image: paint(sunset)
  3. }

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. }
  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.
  1. .demo {
  2. background: paint(cornerbox)
  3. }

Underlined

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

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. }
  1. .demo {
  2. background: paint(lines)
  3. }
  1. .demo {
  2. background-image: paint(bytemare);
  3. }
  1. .demo {
  2. background-image: paint(doomfire)
  3. }
  1. .demo {
  2. background: paint(noise);
  3. }
  1. .demo {
  2. background-image: paint(leaf);
  3. }
  1. .demo {
  2. background: paint(extra-confetti)
  3. }
  1. .demo {
  2. background: paint(static-gradient)
  3. }

Scalloped

  1. .demo {
  2. background: paint(extra-scallopedBorder);
  3. }
  1. .demo {
  2. px
  3. background-image: paint(fleck);
  4. }
  1. .demo {
  2. background: paint(circles)
  3. }
  1. .demo {
  2. background-image: paint(alien)
  3. }
  1. .demo {
  2. background: paint(tesla-coil);
  3. }