While CSS Variables currently provide a way to define user-controlled properties, they have limited usefulness outside reuse through a var() reference and cannot be more strictly defined. CSS Properties & Values API Level 1, aka Custom Properties, extend CSS Variables to allow us to register properties and define their type, initial value, and determine inheritance. This gives a great deal of power and flexibility

Current Situation (CSS Variables)
.thing {
  --my-color: green;
  --my-color: url('not-a-color'); // It's just a variable! It doesn't know any better
  color: var(--my-color); // This is now sad!
But Then (Houdini Custom Properties)
  name: '--my-color',
  syntax: '<color>', // Now it's def a color. That `url` junk is skipped!

Anatomy of a Registered Custom Property

 // From https://drafts.css-houdini.org/css-properties-values-api/ June 7, 2018

  name: '--foo', // String, name of the custom property
  syntax: '<color>', // String, how to parse this property. Defaults to *
  inherits: false, // Boolean, if true should inherit down the DOM tree
  initialValue: 'black', // String, initial value of this property

There are a number of supported syntaxes from the CSS Values and Units spec that can be used when registering a Custom Property:

Any valid length value
Any valid number value
Any valid percentage value
Any valid length or percentage value, or any calc expression combining length and percentage components
Any valid color value
Any Any valid image value
Any valid url value
Any valid integer value
Any valid angle value
Any valid time value
Any valid resolution value
Any valid transform function value
Any valid ident value

You can also use + to allow for a space-separarted list of one or more items of that syntax, and separate syntaxes with | to allow one syntax or another

Play with Custom Properties

Now it's your turn! Below is an example of Custom Properties in action! It will show you how using Custom Properties affects the ability to animate the colors of a linear gradient. It's fully editable, and you'll see the changes live as you type! Change the JavaScript, the CSS, and the HTML, and see how those changes affect the output! There's also a Custom option that'll give you a blank slate to work from. Copy the URL once you've started making a Custom example to get back to your work later!