Log in page designer

Design the sign-in page your users see. Pick one of 10 layouts, set background, card and button colors, upload a logo and background image, edit theme variables or add custom CSS, preview it live and click Save Changes.

Choose the login page layout from the Theme dropdown. There are 10 layouts, such as Classic Split, Modern Reverse, Minimalist Gradient, Sunset Vibes and Dark Mode Pro, each with a short description.

Save Changes stores your login page design. Reset puts all theme variables back to their defaults and clears your custom CSS until you save again.

See a live preview of your login page - background, image, card, logo, Email and Password fields and Sign in button - that updates as you edit and does not affect the app.

Set the login page background as a gradient or a solid color. Type a CSS gradient, pick a solid color, or click a preset: Purple, Blue, Green or Warm.

Set the background of the sign-in card as a solid color (for example #ffffff) or a CSS gradient in the Card Gradient field.

Choose the Primary Color and Accent Color of the login page with a hex value or a color picker. They style the sign-in button and highlights.

Set how wide the login page image is with the Image Width field, for example 65%.

Choose the shape of the login page image: Hexagon, Rectangle, Diagonal or Triangle, or enter a custom shape.

Add your own login page variable with Add Variable. A new row appears where you type the variable name and value; press Enter to save the name or Esc to cancel.

Edit every login page setting in the Theme Variables table: colors, images, card size and radius, shadows, logo size, input styling and the responsive breakpoint. Each row has a value field and a delete button.

Add your own CSS in Custom CSS (Overrides). It is appended after the generated login page styles, so it can override them.