diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js
index 0e0a6d874..2d4337adc 100644
--- a/packages/emotion/src/index.js
+++ b/packages/emotion/src/index.js
@@ -116,6 +116,10 @@ function handleInterpolation(
     return ''
   }
 
+  if (typeof interpolation === 'function') {
+    return interpolation()
+  }
+
   if (typeof interpolation === 'object') {
     return createStringFromObject(interpolation)
   }
diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
index 960880540..31e8663ce 100644
--- a/packages/emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -423,6 +423,16 @@ exports[`css registered styles as nested selector value in object 1`] = `
 />
 `;
 
+exports[`css return function in interpolation 1`] = `
+.glamor-0 {
+  color: blue;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css weakmap 1`] = `
 .glamor-0 {
   display: -webkit-box;
diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js
index 1762e287b..09a3f4737 100644
--- a/packages/emotion/test/css.test.js
+++ b/packages/emotion/test/css.test.js
@@ -290,4 +290,11 @@ describe('css', () => {
     const tree2 = renderer.create(<div className={cls2} />).toJSON()
     expect(tree2).toMatchSnapshot()
   })
+
+  test('return function in interpolation', () => {
+    const cls1 = css`color: ${() => 'blue'};`
+
+    const tree = renderer.create(<div className={cls1} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })
diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap
index d74be831e..6c9d3b564 100644
--- a/packages/react-emotion/test/__snapshots__/index.test.js.snap
+++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap
@@ -312,6 +312,18 @@ exports[`styled higher order component 1`] = `
 />
 `;
 
+exports[`styled inline function return value is a function 1`] = `
+.glamor-0 {
+  font-size: 20px;
+}
+
+<h1
+  className="legacy__class glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled innerRef 1`] = `
 .glamor-0 {
   font-size: 12px;
diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js
index 7c4dad4ee..d797e221d 100644
--- a/packages/react-emotion/test/index.test.js
+++ b/packages/react-emotion/test/index.test.js
@@ -81,6 +81,15 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('inline function return value is a function', () => {
+    const fontSize = 20
+    const H1 = styled('h1')`font-size: ${() => fontSize}px;`
+
+    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('call expression', () => {
     const fontSize = 20
     const H1 = styled('h1')`font-size: ${fontSize}px;`