Save 37% off PRO during our Black Friday Sale! »

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 the 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

October 26, 2018


  1. Make the Web Brighter with the CSS Paint API

  2. Vitalii Bobrov • Angular Wroclaw co-org • CSS experimenter •

    mentor • open-source contributor @bobrov1989
  3. Angular Wrocławław/ @AngularWroclaw

  4. Project Houdini

  5. None
  6. Houdini Paint API

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

    will implement the feature when more developers will use it...
  8. None
  9. CSS Engine Internals Parser CSSOM Cascade Layout Paint Composite

  10. • Too Big & Slow • Too Late • Too

    Incorrect Polyfill with JS
  11. Compile-time Polyfill

  12. None
  13. Worklet

  14. CSS Paint API

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

    • list-style-image • custom <image> property
  16. Use in CSS


  18. CSS Fallback

  19. Polyfill by Jason Miller (@_developit) - Preact creator

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

    class 2. Register paint 3. Load worklet
  21. 1. Declare a custom paint class

  22. 2. Register paint

  23. 3. Load worklet

  24. Practice

  25. ☢ Don't Try this at Home

  26. Paint Hello World

  27. Paint Hello World

  28. Paint Hello World

  29. CSS Paint + variables

  30. CSS Paint + variables

  31. CSS Paint + arguments

  32. CSS Paint + arguments

  33. CSS Paint + alpha

  34. Experiments

  35. chrome://flags/#enable-experimental-web-platform-features

  36. Generative Backgrounds

  37. Material Background CSS Paint Image vs

  38. Material Background CSS Paint Image vs 813 bytes 2.39

    KB Worklet file only few bytes of CSS + init JS compressed JPEG cropped for mobile
  39. Safe the DOM

  40. Star Rating

  41. QR Code

  42. Circle Chart

  43. Bar Chart

  44. JS-in-CSS

  45. Animations

  46. Request Animation Frame

  47. Custom Properties

  48. Custom Properties Level 2

  49. Awesome Houdini

  50. @bobrov1989 Thank YOU!