diff --git a/docs/Theming.md b/docs/Theming.md
index 7d15f526599..f5fba0e2f37 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -842,12 +842,17 @@ export default withRouter(Menu);
 
 ### Changing the Background Image
 
-By default, the login page displays a random background image changing every day. If you want to change that background image, you can use the default Login page component and pass an image URL as the `backgroundImage` prop.
+By default, the login page displays a gradient background. If you want to change the background, you can use the default Login page component and pass an image URL as the `backgroundImage` prop.
 
 ```jsx
 import { Admin, Login } from 'react-admin';
 
-const MyLoginPage = () => <Login backgroundImage="/background.jpg" />;
+const MyLoginPage = () => (
+    <Login
+        // A random image that changes everyday
+        backgroundImage="https://source.unsplash.com/random/1600x900/daily"
+    />
+);
 
 const App = () => (
     <Admin loginPage={MyLoginPage}>
diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
index 74ccc56ecf3..9af6db754b1 100644
--- a/packages/ra-ui-materialui/src/auth/Login.tsx
+++ b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -44,6 +44,8 @@ const useStyles = makeStyles(
             justifyContent: 'flex-start',
             backgroundRepeat: 'no-repeat',
             backgroundSize: 'cover',
+            backgroundImage:
+                'radial-gradient(circle at 50% 14em, #313264 0%, #00023b 60%, #00023b 100%)',
         },
         card: {
             minWidth: 300,
@@ -160,7 +162,6 @@ Login.propTypes = {
 };
 
 Login.defaultProps = {
-    backgroundImage: 'https://source.unsplash.com/random/1600x900/daily',
     theme: defaultTheme,
     children: <DefaultLoginForm />,
 };