first revision

assets/login/resources/css/styles.css

@@ -0,0 +1,39 @@
+body {
+  background: linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.45)),
+    url("../img/background.svg") center center / cover no-repeat fixed;
+  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+/* Keycloak's built-in theme markup/classes vary by version, so several
+   selectors are listed as best-effort hooks for the login card - inspect
+   the rendered page and adjust whichever one actually matches. */
+.login-pf-page .card-pf,
+#kc-form-wrapper,
+.pf-c-login__main-body,
+.pf-v5-c-login__main-body {
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  border-radius: 16px;
+  border: none;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+#kc-header-wrapper,
+.pf-c-login__header,
+.pf-v5-c-login__header {
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+.btn-primary,
+.pf-c-button.pf-m-primary,
+.pf-v5-c-button.pf-m-primary {
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+
+input.form-control,
+.pf-c-form-control,
+.pf-v5-c-form-control {
+  border-radius: 8px;
+}

assets/login/resources/img/background.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="50%" stop-color="#4338ca"/>
+      <stop offset="100%" stop-color="#6d28d9"/>
+    </linearGradient>
+    <filter id="blur1">
+      <feGaussianBlur stdDeviation="120"/>
+    </filter>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#bg)"/>
+  <circle cx="300" cy="200" r="260" fill="#818cf8" opacity="0.35" filter="url(#blur1)"/>
+  <circle cx="1650" cy="850" r="320" fill="#c084fc" opacity="0.35" filter="url(#blur1)"/>
+  <circle cx="1500" cy="150" r="200" fill="#22d3ee" opacity="0.25" filter="url(#blur1)"/>
+</svg>