Brought to you by

Houdini.how

Worklet Library

curved-line

Paint

.demo {
--curved-lineHeight:
--curved-lineWidth:
--curved-lineColor:
--curved-lineSpread:
background: paint(curved-line);
}

parallelowow

Paint

.demo {
--parallelowow-tile-width:
--parallelowow-base-color:
--parallelowow-color-step:
--parallelowow-probability:
--parallelowow-stroke-weight:
background: paint(parallelowow), var(--parallelowow-base-color);
}

css-houdini-bubbles

Paint

.demo {
--bubbles-colors:
--bubbles-min-radius:
--bubbles-max-radius:
--bubbles-total-num:
--bubbles-is-dark:
background: paint(bubbles)
}

@houdini-modules/border-radius-reverse

Paint

Content!

.demo {
--border-radius-reverse:
--border-radius-reverse-color:
border: calc(var(--border-radius-reverse) * 1px) solid transparent;
border-image: paint(border-radius-reverse);
border-image-slice: var(--border-radius-reverse);
}

extra-sparkles

Paint

.demo {
--extra-sparkleNumber:
--extra-sparkleHue:
--extra-sparkleHeightVariance:
--extra-sparkleWidthVariance:
--extra-sparkleWeightVariance:
background: paint(extra-sparkles)
}

css-houdini-fractals

by Conrad Sollitt

Paint

.demo {
--colors:
--shape:
--angle:
--starting-length-percent:
--next-line-size:
background-image: paint(fractals)
}

houdini-powdered-gradient

Paint

.demo {
--powdered-gradient-direction:
--powdered-gradient-color:
--powdered-gradient-size:
background: paint(powdered-gradient), #111
}

css-houdini-voronoi

Paint

.demo {
--voronoi-cell-colors:
--voronoi-number-of-cells:
--voronoi-line-color:
--voronoi-line-width:
--voronoi-dot-color:
--voronoi-dot-size:
background: paint(voronoi)
}

houdini-glow-lights

Paint

.demo {
--lights:
--light-radius:
background: paint(glow-lights);
}

houdini-paint-dot-grid

by @arnellebalane

Paint

.demo {
--dot-size:
--dot-spacing:
--dot-color:
background: paint(dot-grid);
}

css-houdini-connections

Paint

.demo {
--connections-particleColor:
--connections-lineColor:
--connections-particleAmount:
--connections-defaultRadius:
--connections-variantRadius:
--connections-linkRadius:
background: paint(connections)
}

houdini-sunset

Paint

.demo {
--sunset-gradient-start:
--sunset-gradient-end:
--sunset-line-color:
--sunset-grid-size:
background-image: paint(sunset)
}

houdini-avatar-polygon

Paint

Hello!

.demo {
--polygon-bg:
--avatar-sides:
--avatar-angle:
padding: 3rem;
background: var(--polygon-bg);
-webkit-mask-image: paint(avatar-polygon);
mask-image: paint(avatar-polygon);
}

angled-corners

Paint

.demo {
--corner-radius:
--paint-color:
--stroke-weight:
background: paint(angled-corners);
}

Note: Partial demo for compatibility. For full effect using arguments, view Demo with Experimental Web Platform Features flag on.

cornerbox

Paint

.demo {
--cornerbox-color:
--cornerbox-length:
--cornerbox-width:
background: paint(cornerbox)
}

extra-underline

Paint

Underlined

.demo {
--extra-underlineNumber:
--extra-underlineColor:
--extra-underlineWidth:
--extra-underlineSpread:
background: paint(extra-superUnderline);
}

css-houdini-lines

Paint

.demo {
--lines-colors:
--lines-widths:
--lines-gaps:
--lines-rotate:
background: paint(lines)
}

bytemare

Paint

.demo {
--bytemare-tile-size:
--bytemare-color:
--bytemare-gap:
--bytemare-probability:
background-image: paint(bytemare);
}

houdini-doom-fire

Paint

.demo {
--doomfire-pixel-size:
background-image: paint(doomfire)
}

houdini-noise

by Jhey Tompkins

Paint

.demo {
--noise-cell-size:
--noise-hue:
--noise-saturation:
--noise-lightness:
background: paint(noise);
}

houdini-leaf

Paint

.demo {
--leaf-color:
--leaf-size:
--leaf-variance:
background-image: paint(leaf);
}

extra-confetti

Paint

.demo {
--extra-confettiNumber:
--extra-confettiLengthVariance:
--extra-confettiWeightVariance:
background: paint(extra-confetti)
}

houdini-static-gradient

Paint

.demo {
--static-gradient-direction:
--static-gradient-color:
--static-gradient-size:
background: paint(static-gradient)
}

extra-scalloped-border

Paint

Scalloped

.demo {
--extra-scallopColor:
--extra-scallopRadius:
--extra-scallopWeight:
background: paint(extra-scallopedBorder);
}

houdini-paint-flecks

by George Francis

Paint

.demo {
background-color:
--fleck-colors:
--fleck-density:
--fleck-size-base:
px
--fleck-cell-size:
--fleck-seed:
background-image: paint(fleck);
}

css-houdini-circles

Paint

.demo {
--colors:
--min-radius:
--max-radius:
--min-opacity:
--max-opacity:
--num-circles:
background: paint(circles)
}

houdini-alien

Paint

.demo {
--alien-bg-color:
--alien-fg-color:
--alien-grid-size:
background-image: paint(alien)
}

houdini-tesla

by Jhey Tompkins

Paint

.demo {
--tesla-segments:
--tesla-angle:
--tesla-blur:
--tesla-width:
--tesla-hue:
--tesla-saturation:
--tesla-lightness:
background: paint(tesla-coil);
}

Houdini.how

Brought to you by web.dev