diff --git a/packages/fela-plugin-prefixer/src/__tests__/__snapshots__/prefixer-test.js.snap b/packages/fela-plugin-prefixer/src/__tests__/__snapshots__/prefixer-test.js.snap
index c26cb755b..a85e67a97 100755
--- a/packages/fela-plugin-prefixer/src/__tests__/__snapshots__/prefixer-test.js.snap
+++ b/packages/fela-plugin-prefixer/src/__tests__/__snapshots__/prefixer-test.js.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Prefixer plugin handles css property values with line breaks correctly 1`] = `
+Object {
+  ":hover": Object {
+    "justifyContent": "center",
+  },
+  "WebkitBackgroundImage": "linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    );background-image:linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    )",
+  "display": "-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex",
+}
+`;
+
 exports[`Prefixer plugin should prefix nested objects 1`] = `
 Object {
   ":hover": Object {
diff --git a/packages/fela-plugin-prefixer/src/__tests__/prefixer-test.js b/packages/fela-plugin-prefixer/src/__tests__/prefixer-test.js
index 524bcd3a4..8be700b04 100644
--- a/packages/fela-plugin-prefixer/src/__tests__/prefixer-test.js
+++ b/packages/fela-plugin-prefixer/src/__tests__/prefixer-test.js
@@ -20,6 +20,22 @@ describe('Prefixer plugin', () => {
 
     expect(prefixer()(style)).toMatchSnapshot()
   })
+
+  it('handles css property values with line breaks correctly', () => {
+    const style = {
+      display: 'flex',
+      backgroundImage: `linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    )`,
+      ':hover': {
+        justifyContent: 'center',
+      },
+    }
+    expect(prefixer()(style)).toMatchSnapshot()
+  })
 })
 
 describe('Prefixer plugin (optimized)', () => {
@@ -47,4 +63,32 @@ describe('Prefixer plugin (optimized)', () => {
       value: 'center',
     })
   })
+
+  it('handles css property values with line breaks correctly', () => {
+    const plugin = prefixer().optimized
+    expect(
+      plugin({
+        property: 'backgroundImage',
+        value: `linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    )`,
+      })
+    ).toEqual({
+      property: 'WebkitBackgroundImage',
+      value: `linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    );background-image:linear-gradient(90deg,
+      rgba(255,255,255, 0) 0,
+      red 40%,
+      red 60%,
+      rgba(255,255,255, 0)
+    )`,
+    })
+  })
 })
diff --git a/packages/fela-plugin-prefixer/src/index.js b/packages/fela-plugin-prefixer/src/index.js
index 6799d428a..a86b479bc 100644
--- a/packages/fela-plugin-prefixer/src/index.js
+++ b/packages/fela-plugin-prefixer/src/index.js
@@ -14,7 +14,7 @@ function addVendorPrefixes(style) {
         const prefixed = stylisPrefix(cssDeclaration, property.length)
 
         if (prefixed !== cssDeclaration) {
-          const [property, value] = prefixed.split(/:(.+)/)
+          const [property, value] = prefixed.split(/:([\S\s]+)/)
           // TODO: do we really need to camelCase here?
           prefixedStyle[camelCaseProperty(property)] = value.slice(0, -1)
         } else {
@@ -33,7 +33,7 @@ addVendorPrefixes.optimized = (props) => {
   const prefixed = stylisPrefix(cssDeclaration, props.property.length)
 
   if (prefixed !== cssDeclaration) {
-    const [property, value] = prefixed.split(/:(.+)/)
+    const [property, value] = prefixed.split(/:([\S\s]+)/)
     // TODO: do we really need to camelCase here?
     props.property = camelCaseProperty(property)
     props.value = value.slice(0, -1)