You can create a consistently branded login experience for your users by styling your prompts. With the Universal Login no-code editor, you can easily customize the colors, fonts, borders, and backgrounds of the prompts displayed to users throughout the login flow. The no-code editor allows you to customize your Universal Login branding theme. To customize the text included in each prompt, review Customize Universal Login Text Elements. For expanded customization capabilities, review Customize Universal Login Page Templates.
To leverage the no-code editor, you must have Universal Login enabled. The Classic Login experience does not support this editor.

​
Universal Login no-code editor

To customize your Universal Login theme, follow the steps below:
  1. On the Auth0 Dashboard, navigate to Branding > Universal Login > Customization Options.
  2. Select a theme component (e.g., Colors) from the Styles menu. Then, customize the options listed to the right.
  3. After customizing your theme, select Save and Publish.
After you save your theme, you can access a live preview of your login experience to review and test your screens. To launch the preview in a new tab, select Try above the no-code editor.

​
Theme components

To create your desired Universal Login theme, the Styles menu contains the following components:
Select an input field to change the color of the element. To choose specific colors, you can:
  • Use the color picker.
  • Input the Hex code or RGB value.
  • Select the eyedropper tool to choose a color from your screen for the available elements.
ElementDescription
Primary buttonFills primary button, or button that triggers the next action, with color choice.
Primary button labelChanges color of text within primary button.
Secondary button borderChanges border on input fields.
Secondary button labelChanges text within clickable secondary fields.
Links and focused componentsChanges text color of links that lead users to trigger another workflow, such as reset password or try another authentication method.
Base focus colorChanges the color of buttons when the mouse hovers over the button before selection.
Base hover colorChanges the color of a button when user clicks on it.
HeaderChanges the text color of the title in the header.
Body textChanges the text color of body text.
Widget backgroundChanges the background color of widgets.
Widget borderChanges the border color of the widgets.
Input labels and placeholdersChanges the text of input field labels and placeholder text.
Input filled textChanges text color users type in input fields. For example, username and password fields.
Input borderChanges border color of input fields.
Input backgroundChanges background color of input fields.
IconsChanges color of icons inside input fields.
ErrorChanges color of error messages within widgets.
SuccessChanges color of success message within widgets.
Once you make a change, the preview window displays several examples of the widgets with your specified changes.
To change the default font, enter the URL to any WOFF (Web Open Font Format) file in the input field. Your WOFF files need to be hosted using a CDN with CORS enabled or a hosting site with Access-Control-Allow-Origin header.Under the font URL panel, adjust the general text size under the Reference text size pixel option. You should note the rest of the options do not change when the reference text is changed.Change the following elements individually:
  • Title
  • Subtitle
  • Body Text
  • Button Text
  • Input Labels
  • Links
When you select an option to configure, the preview pane displays the location of the element on the widget and adjusts to the specified size.
To customize the borders, buttons styles, input fields, and widget corners adjust the slider or choose from the available options.
OptionDescription
Button border weightAdjusts width of border around input fields inside login prompts.
Buttons styleChanges shape of clickable buttons inside widgets. Available options are: sharp corners, rounded corners, or pill-shaped style.
Button border radiusAdjusts corners of clickable buttons when you select rounded corners.
Input border weightAdjusts width of borders of input fields and clickable buttons inside login prompts.
Inputs styleChanges shape of input fields inside login prompts. Available options are: sharp corners, rounded corners, or pill-shaped style.
Input border radiusAdjusts corners of input fields when you select rounded corners.
Widget corner radiusChanges shape of the widget from sharp to rounded corners.
Widget border weightAdjusts width of widget border.
ShadowCheckbox to allow widgets to have a shadow.
Add the URL of your logo to configure the position, height, text alignment, and social login location.
ElementDescription
Logo positionChoose the location of the widget to be on the left, right, or center of the page. You can also choose to hide the logo.
Logo URLEnter the URL location of your custom logo. Auth0 recommends SVG files.
Logo HeightAdjust the size of your logo at the top of the widget.
Header Text AlignmentChoose if text within the header should be left, right, or center justified.
Social Buttons LayoutChoose if text should be at the top or bottom of the button.
Add a background image URL to choose a background to display in the prompt widget. The No-Code Editor supports other image formats such as PNGs and JPEGs.
Auth0 recommends you use a JPEG image format at least 2000px wide.
Then, choose if the widget aligns center, left, or right on the screen.

​
Management API

You can also customize your Universal Login theme with the Management API. Specifically, you can use the Branding endpoints to: