diff --git a/packages/core/src/sanitization/style_sanitizer.ts b/packages/core/src/sanitization/style_sanitizer.ts
index 1e61cc8f2d..a1c0b7e0da 100644
--- a/packages/core/src/sanitization/style_sanitizer.ts
+++ b/packages/core/src/sanitization/style_sanitizer.ts
@@ -29,7 +29,7 @@ const VALUES = '[-,."\'%_!# a-zA-Z0-9]+';
 const TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|Z|3d)?';
 const COLOR_FNS = '(?:rgb|hsl)a?';
 const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient';
-const CSS3_FNS = '(?:attr|calc)';
+const CSS3_FNS = '(?:attr|calc|var)';
 const FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)';
 const SAFE_STYLE_VALUE = new RegExp(
     `^(${VALUES}|` +
diff --git a/packages/core/test/sanitization/style_sanitizer_spec.ts b/packages/core/test/sanitization/style_sanitizer_spec.ts
index b0c1035bf7..d96251b482 100644
--- a/packages/core/test/sanitization/style_sanitizer_spec.ts
+++ b/packages/core/test/sanitization/style_sanitizer_spec.ts
@@ -51,6 +51,9 @@ describe('Style sanitizer', () => {
 
   it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); });
 
+  it('accepts var',
+     () => { expectSanitize('var(--my-custom-var)').toEqual('var(--my-custom-var)'); });
+
   it('sanitizes URLs', () => {
     expectSanitize('url(foo/bar.png)').toEqual('url(foo/bar.png)');
     expectSanitize('url( foo/bar.png\n )').toEqual('url( foo/bar.png\n )');