Make the Web Brighter with the CSS Paint API

Make the Web Brighter with the CSS Paint API

Using experimental CSS features in production is a web developer dream! Do you want to extend CSS functionality with your code? During this talk, I will show how to programmatically generate an image for any CSS property that can use pictures with CSS Paint API. We will go from basics to advanced features through amazing practical examples. With few lines of JavaScript, you could create and register own CSS functions similar to linear-gradient. Afterward, you will be able to develop polyfills for a feature from spec draft or create cool backgrounds with code, with safe fallbacks that you can use in production right now.


Vitalii Bobrov

July 21, 2018


  1. 2.

    Vitalii Bobrov • 5 years of front-end • build enterprise

    web apps • CSS experimenter • mentor • open-source contributor @bobrov1989
  2. 3.

    Agenda • What is the Houdini Project? • Introduction to

    the CSS Paint API • Practice & Experiments
  3. 6.

    We want to use the feature after browser implementation.... We

    will implement the feature when more developers will use it...
  4. 7.
  5. 11.
  6. 14.

    ANY Property that expects an Image • background-image • border-image

    • list-style-image • custom <image> property
  7. 19.

    How to create Custom Paint? 1. Declare a custom paint

    class 2. Register paint 3. Load worklet
  8. 23.
  9. 45.

    Resources • • • • • • •