diff --git a/docs/pages/api-docs/paper.md b/docs/pages/api-docs/paper.md
index 860c8168862003..8084c8f3558749 100644
--- a/docs/pages/api-docs/paper.md
+++ b/docs/pages/api-docs/paper.md
@@ -71,6 +71,31 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">elevation22</span> | <span class="prop-name">.MuiPaper-elevation22</span> | 
 | <span class="prop-name">elevation23</span> | <span class="prop-name">.MuiPaper-elevation23</span> | 
 | <span class="prop-name">elevation24</span> | <span class="prop-name">.MuiPaper-elevation24</span> | 
+| <span class="prop-name">overlay0</span> | <span class="prop-name">.MuiPaper-overlay0</span> | 
+| <span class="prop-name">overlay1</span> | <span class="prop-name">.MuiPaper-overlay1</span> | 
+| <span class="prop-name">overlay2</span> | <span class="prop-name">.MuiPaper-overlay2</span> | 
+| <span class="prop-name">overlay3</span> | <span class="prop-name">.MuiPaper-overlay3</span> | 
+| <span class="prop-name">overlay4</span> | <span class="prop-name">.MuiPaper-overlay4</span> | 
+| <span class="prop-name">overlay5</span> | <span class="prop-name">.MuiPaper-overlay5</span> | 
+| <span class="prop-name">overlay6</span> | <span class="prop-name">.MuiPaper-overlay6</span> | 
+| <span class="prop-name">overlay7</span> | <span class="prop-name">.MuiPaper-overlay7</span> | 
+| <span class="prop-name">overlay8</span> | <span class="prop-name">.MuiPaper-overlay8</span> | 
+| <span class="prop-name">overlay9</span> | <span class="prop-name">.MuiPaper-overlay9</span> | 
+| <span class="prop-name">overlay10</span> | <span class="prop-name">.MuiPaper-overlay10</span> | 
+| <span class="prop-name">overlay11</span> | <span class="prop-name">.MuiPaper-overlay11</span> | 
+| <span class="prop-name">overlay12</span> | <span class="prop-name">.MuiPaper-overlay12</span> | 
+| <span class="prop-name">overlay13</span> | <span class="prop-name">.MuiPaper-overlay13</span> | 
+| <span class="prop-name">overlay14</span> | <span class="prop-name">.MuiPaper-overlay14</span> | 
+| <span class="prop-name">overlay15</span> | <span class="prop-name">.MuiPaper-overlay15</span> | 
+| <span class="prop-name">overlay16</span> | <span class="prop-name">.MuiPaper-overlay16</span> | 
+| <span class="prop-name">overlay17</span> | <span class="prop-name">.MuiPaper-overlay17</span> | 
+| <span class="prop-name">overlay18</span> | <span class="prop-name">.MuiPaper-overlay18</span> | 
+| <span class="prop-name">overlay19</span> | <span class="prop-name">.MuiPaper-overlay19</span> | 
+| <span class="prop-name">overlay20</span> | <span class="prop-name">.MuiPaper-overlay20</span> | 
+| <span class="prop-name">overlay21</span> | <span class="prop-name">.MuiPaper-overlay21</span> | 
+| <span class="prop-name">overlay22</span> | <span class="prop-name">.MuiPaper-overlay22</span> | 
+| <span class="prop-name">overlay23</span> | <span class="prop-name">.MuiPaper-overlay23</span> | 
+| <span class="prop-name">overlay24</span> | <span class="prop-name">.MuiPaper-overlay24</span> | 
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index 08eacbe30b05fd..85e54f908e6a4c 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -198,9 +198,6 @@ export function ThemeProvider(props) {
             main: paletteType === 'light' ? darken(pink.A400, 0.1) : pink[200],
           },
           type: paletteType,
-          background: {
-            default: paletteType === 'light' ? '#fff' : '#121212',
-          },
           ...paletteColors,
         },
         spacing,
diff --git a/docs/src/pages/components/paper/SimplePaper.js b/docs/src/pages/components/paper/SimplePaper.js
index 69d1c5d9d0fd06..2c74d86d94d240 100644
--- a/docs/src/pages/components/paper/SimplePaper.js
+++ b/docs/src/pages/components/paper/SimplePaper.js
@@ -19,7 +19,7 @@ export default function SimplePaper() {
 
   return (
     <div className={classes.root}>
-      <Paper elevation={0} />
+      <Paper variant="outlined" elevation={0} />
       <Paper />
       <Paper elevation={3} />
     </div>
diff --git a/docs/src/pages/components/paper/SimplePaper.tsx b/docs/src/pages/components/paper/SimplePaper.tsx
index 1ccffc4a928207..4e4195f0a79fb1 100644
--- a/docs/src/pages/components/paper/SimplePaper.tsx
+++ b/docs/src/pages/components/paper/SimplePaper.tsx
@@ -21,7 +21,7 @@ export default function SimplePaper() {
 
   return (
     <div className={classes.root}>
-      <Paper elevation={0} />
+      <Paper variant="outlined" elevation={0} />
       <Paper />
       <Paper elevation={3} />
     </div>
diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts
index f9bef607810b53..fd02b697236f5f 100644
--- a/packages/material-ui/src/Paper/Paper.d.ts
+++ b/packages/material-ui/src/Paper/Paper.d.ts
@@ -55,7 +55,32 @@ export type PaperClassKey =
   | 'elevation21'
   | 'elevation22'
   | 'elevation23'
-  | 'elevation24';
+  | 'elevation24'
+  | 'overlay0'
+  | 'overlay1'
+  | 'overlay2'
+  | 'overlay3'
+  | 'overlay4'
+  | 'overlay5'
+  | 'overlay6'
+  | 'overlay7'
+  | 'overlay8'
+  | 'overlay9'
+  | 'overlay10'
+  | 'overlay11'
+  | 'overlay12'
+  | 'overlay13'
+  | 'overlay14'
+  | 'overlay15'
+  | 'overlay16'
+  | 'overlay17'
+  | 'overlay18'
+  | 'overlay19'
+  | 'overlay20'
+  | 'overlay21'
+  | 'overlay22'
+  | 'overlay23'
+  | 'overlay24';
 
 /**
  *
diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
index 80c7987f861236..c6deb9254c70a7 100644
--- a/packages/material-ui/src/Paper/Paper.js
+++ b/packages/material-ui/src/Paper/Paper.js
@@ -3,6 +3,19 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
+import { fade, useTheme } from '../styles';
+
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+function calculateAlpha(elevation) {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return (alphaValue / 100).toFixed(2);
+}
 
 export const styles = (theme) => {
   const elevations = {};
@@ -12,12 +25,28 @@ export const styles = (theme) => {
     };
   });
 
+  const overlays = {};
+  theme.shadows.forEach((_, index) => {
+    overlays[`overlay${index}`] = {
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        background: fade('#fff', calculateAlpha(index)),
+      },
+    };
+  });
+
   return {
     /* Styles applied to the root element. */
     root: {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
       transition: theme.transitions.create('box-shadow'),
+      position: 'relative',
     },
     /* Styles applied to the root element if `square={false}`. */
     rounded: {
@@ -28,6 +57,7 @@ export const styles = (theme) => {
       border: `1px solid ${theme.palette.divider}`,
     },
     ...elevations,
+    ...overlays,
   };
 };
 
@@ -42,6 +72,8 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     ...other
   } = props;
 
+  const theme = useTheme();
+
   return (
     <Component
       className={clsx(
@@ -49,6 +81,7 @@ const Paper = React.forwardRef(function Paper(props, ref) {
         {
           [classes.rounded]: !square,
           [classes[`elevation${elevation}`]]: variant === 'elevation',
+          [classes[`overlay${elevation}`]]: theme.palette.type === 'dark',
           [classes.outlined]: variant === 'outlined',
         },
         className,
diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js
index ceb5af6c168207..32928f107c01da 100644
--- a/packages/material-ui/src/Paper/Paper.test.js
+++ b/packages/material-ui/src/Paper/Paper.test.js
@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow, getClasses, createMount, describeConformance } from 'test/utils';
+import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
 import * as PropTypes from 'prop-types';
 import Paper from './Paper';
 import { createMuiTheme, ThemeProvider } from '../styles';
 
 describe('<Paper />', () => {
   const mount = createMount();
-  let shallow;
   let classes;
+  const render = createClientRender();
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<Paper />);
   });
 
@@ -25,42 +24,64 @@ describe('<Paper />', () => {
 
   describe('prop: square', () => {
     it('can disable the rounded class', () => {
-      const wrapper = mount(<Paper square>Hello World</Paper>);
-      expect(wrapper.find(`.${classes.root}`).some(`.${classes.rounded}`)).to.equal(false);
+      const { container } = render(<Paper square>Hello World</Paper>);
+      expect(container.firstChild).not.to.have.class(classes.rounded);
     });
 
     it('adds a rounded class to the root when omitted', () => {
-      const wrapper = mount(<Paper>Hello World</Paper>);
-      expect(wrapper.find(`.${classes.root}`).every(`.${classes.rounded}`)).to.equal(true);
+      const { container } = render(<Paper>Hello World</Paper>);
+      expect(container.firstChild).to.have.class(classes.rounded);
     });
   });
 
   describe('prop: variant', () => {
     it('adds a outlined class', () => {
-      const wrapper = mount(<Paper variant="outlined">Hello World</Paper>);
-      expect(wrapper.find(`.${classes.root}`).some(`.${classes.outlined}`)).to.equal(true);
+      const { container } = render(<Paper variant="outlined">Hello World</Paper>);
+      expect(container.firstChild).to.have.class(classes.outlined);
     });
   });
 
-  it('should set the elevation elevation class', () => {
-    const wrapper = shallow(<Paper elevation={16}>Hello World</Paper>);
-    expect(wrapper.hasClass(classes.elevation16)).to.equal(true);
-    wrapper.setProps({ elevation: 24 });
-    expect(wrapper.hasClass(classes.elevation24)).to.equal(true);
-    wrapper.setProps({ elevation: 2 });
-    expect(wrapper.hasClass(classes.elevation2)).to.equal(true);
+  it('should set the overlay class based on the elevation prop in dark theme', () => {
+    const darkTheme = createMuiTheme({ palette: { type: 'dark' } });
+    const { container, rerender } = render(
+      <ThemeProvider theme={darkTheme}>
+        <Paper elevation={16}>Hello World</Paper>
+      </ThemeProvider>,
+    );
+    expect(container.firstChild).to.have.class(classes.overlay16);
+    rerender(
+      <ThemeProvider theme={darkTheme}>
+        <Paper elevation={24}>Hello World</Paper>
+      </ThemeProvider>,
+    );
+    expect(container.firstChild).to.have.class(classes.overlay24);
+    rerender(
+      <ThemeProvider theme={darkTheme}>
+        <Paper elevation={2}>Hello World</Paper>
+      </ThemeProvider>,
+    );
+    expect(container.firstChild).to.have.class(classes.overlay2);
+  });
+
+  it('should set the elevation class based on the elevation prop', () => {
+    const { container, setProps } = render(<Paper elevation={16}>Hello World</Paper>);
+    expect(container.firstChild).to.have.class(classes.elevation16);
+    setProps({ elevation: 24 });
+    expect(container.firstChild).to.have.class(classes.elevation24);
+    setProps({ elevation: 2 });
+    expect(container.firstChild).to.have.class(classes.elevation2);
   });
 
   it('allows custom elevations via theme.shadows', () => {
     const theme = createMuiTheme();
     theme.shadows.push('20px 20px');
-    const wrapper = mount(
+    const { container } = render(
       <ThemeProvider theme={theme}>
-        <Paper data-testid="paper" classes={{ elevation25: 'custom-elevation' }} elevation={25} />
+        <Paper classes={{ elevation25: 'custom-elevation' }} elevation={25} />
       </ThemeProvider>,
     );
 
-    expect(wrapper.find('div[data-testid="paper"]').hasClass('custom-elevation')).to.equal(true);
+    expect(container.firstChild).to.have.class('custom-elevation');
   });
 
   describe('warnings', () => {
diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js
index 8b56199197ccf5..b593a5c1b836ee 100644
--- a/packages/material-ui/src/styles/createPalette.js
+++ b/packages/material-ui/src/styles/createPalette.js
@@ -28,7 +28,7 @@ export const light = {
   // Consistency between these values is important.
   background: {
     paper: common.white,
-    default: grey[50],
+    default: common.white,
   },
   // The colors used to style the action elements.
   action: {
@@ -61,8 +61,8 @@ export const dark = {
   },
   divider: 'rgba(255, 255, 255, 0.12)',
   background: {
-    paper: grey[800],
-    default: '#303030',
+    paper: '#121212',
+    default: '#121212',
   },
   action: {
     active: common.white,