---
title: "Styling Embedded Authentication"
url: https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/
description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts."
last_updated: 2026-08-28T06:26:16Z
service: Cloud Scale
type: general
---

# Styling Embedded Authentication Type

Catalyst enables you to style both variants of the embedded authentication type:

* The conventional login form iFrame
* The Social Login-only form iFrame

You can also style the **Reset Password** and the **Confirm Password** pages by providing custom CSS files or by importing the styling elements you used to set up *Hosted Authentication* type.

### To change the style of the conventional iFrame:
![cloud_scale_auth_embedded_conventional](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_conventional.webp)

1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. [Download here](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css).

2. [Refer to this document](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/), to know the descriptions of each CSS component.

### To change the style of the Social Login-only form:
![cloud_scale_auth_embedded_socials](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_socials.webp)

1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. [Download here](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css).

2. [Refer to this document](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/), to view the descriptions of each CSS component.

### To change the style of the Confirm Password iFrame:
![cloud_scale_confirm_pwd_page](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_confirm_pwd_page.webp)

1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. [Download here](https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css).

2. [Refer to this document](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/#section-where-the-end-user-confirms-their-password/), to view the descriptions of each CSS component.

### To change the style of the Password Reset iFrame:
![cloud_scale_password_reset_page](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_password_reset_page.webp)

1. Click the download button to download the CSS file, and begin styling your document after the last line of code as instructed in the document. [Download here](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css).

2. [Refer to this document](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/), to view the descriptions of each CSS component.