Radzen Blazor Components

Documentation About Radzen

Colors

List of colors and utility CSS classes.

Theme Colors

These are the root theme colors. Each theme has its own color values assigned. Change the theme to preview them.

--rz-white

--rz-base-50

--rz-base-100

--rz-base-200

--rz-base-300

--rz-base-400

--rz-base-500

--rz-base-600

--rz-base-700

--rz-base-800

--rz-base-900

--rz-black

--rz-primary

--rz-primary-lighter

--rz-primary-light

--rz-primary-dark

--rz-primary-darker

--rz-secondary

--rz-secondary-lighter

--rz-secondary-light

--rz-secondary-dark

--rz-secondary-darker

--rz-info

--rz-info-lighter

--rz-info-light

--rz-info-dark

--rz-info-darker

--rz-success

--rz-success-lighter

--rz-success-light

--rz-success-dark

--rz-success-darker

--rz-warning

--rz-warning-lighter

--rz-warning-light

--rz-warning-dark

--rz-warning-darker

--rz-danger

--rz-danger-lighter

--rz-danger-light

--rz-danger-dark

--rz-danger-darker

--rz-series-1

--rz-series-2

--rz-series-3

--rz-series-4

--rz-series-5

--rz-series-6

--rz-series-7

--rz-series-8

Utility CSS Classes

Use these classes to set background, text or border colors. E.g. class="rz-background-color-secondary"

Background-color

.rz-background-color-white

.rz-background-color-base-50

.rz-background-color-base-100

.rz-background-color-base-200

.rz-background-color-base-300

.rz-background-color-base-400

.rz-background-color-base-500

.rz-background-color-base-600

.rz-background-color-base-700

.rz-background-color-base-800

.rz-background-color-base-900

.rz-background-color-black

.rz-background-color-primary-lighter

.rz-background-color-primary-light

.rz-background-color-primary

.rz-background-color-primary-dark

.rz-background-color-primary-darker

.rz-background-color-secondary-lighter

.rz-background-color-secondary-light

.rz-background-color-secondary

.rz-background-color-secondary-dark

.rz-background-color-secondary-darker

.rz-background-color-info-lighter

.rz-background-color-info-light

.rz-background-color-info

.rz-background-color-info-dark

.rz-background-color-info-darker

.rz-background-color-success-lighter

.rz-background-color-success-light

.rz-background-color-success

.rz-background-color-success-dark

.rz-background-color-success-darker

.rz-background-color-warning-lighter

.rz-background-color-warning-light

.rz-background-color-warning

.rz-background-color-warning-dark

.rz-background-color-warning-darker

.rz-background-color-danger-lighter

.rz-background-color-danger-light

.rz-background-color-danger

.rz-background-color-danger-dark

.rz-background-color-danger-darker

.rz-background-color-series-1

.rz-background-color-series-2

.rz-background-color-series-3

.rz-background-color-series-4

.rz-background-color-series-5

.rz-background-color-series-6

.rz-background-color-series-7

.rz-background-color-series-8

Color on white

.rz-color-white

.rz-color-base-50

.rz-color-base-100

.rz-color-base-200

.rz-color-base-300

.rz-color-base-400

.rz-color-base-500

.rz-color-base-600

.rz-color-base-700

.rz-color-base-800

.rz-color-base-900

.rz-color-black

.rz-color-primary-lighter

.rz-color-primary-light

.rz-color-primary

.rz-color-primary-dark

.rz-color-primary-darker

.rz-color-secondary-lighter

.rz-color-secondary-light

.rz-color-secondary

.rz-color-secondary-dark

.rz-color-secondary-darker

.rz-color-info-lighter

.rz-color-info-light

.rz-color-info

.rz-color-info-dark

.rz-color-info-darker

.rz-color-success-lighter

.rz-color-success-light

.rz-color-success

.rz-color-success-dark

.rz-color-success-darker

.rz-color-warning-lighter

.rz-color-warning-light

.rz-color-warning

.rz-color-warning-dark

.rz-color-warning-darker

.rz-color-danger-lighter

.rz-color-danger-light

.rz-color-danger

.rz-color-danger-dark

.rz-color-danger-darker

.rz-color-series-1

.rz-color-series-2

.rz-color-series-3

.rz-color-series-4

.rz-color-series-5

.rz-color-series-6

.rz-color-series-7

.rz-color-series-8

Color on black

.rz-color-white

.rz-color-base-50

.rz-color-base-100

.rz-color-base-200

.rz-color-base-300

.rz-color-base-400

.rz-color-base-500

.rz-color-base-600

.rz-color-base-700

.rz-color-base-800

.rz-color-base-900

.rz-color-black

.rz-color-primary-lighter

.rz-color-primary-light

.rz-color-primary

.rz-color-primary-dark

.rz-color-primary-darker

.rz-color-secondary-lighter

.rz-color-secondary-light

.rz-color-secondary

.rz-color-secondary-dark

.rz-color-secondary-darker

.rz-color-info-lighter

.rz-color-info-light

.rz-color-info

.rz-color-info-dark

.rz-color-info-darker

.rz-color-success-lighter

.rz-color-success-light

.rz-color-success

.rz-color-success-dark

.rz-color-success-darker

.rz-color-warning-lighter

.rz-color-warning-light

.rz-color-warning

.rz-color-warning-dark

.rz-color-warning-darker

.rz-color-danger-lighter

.rz-color-danger-light

.rz-color-danger

.rz-color-danger-dark

.rz-color-danger-darker

.rz-color-series-1

.rz-color-series-2

.rz-color-series-3

.rz-color-series-4

.rz-color-series-5

.rz-color-series-6

.rz-color-series-7

.rz-color-series-8

Border-color

.rz-border-color-white

.rz-border-color-base-50

.rz-border-color-base-100

.rz-border-color-base-200

.rz-border-color-base-300

.rz-border-color-base-400

.rz-border-color-base-500

.rz-border-color-base-600

.rz-border-color-base-700

.rz-border-color-base-800

.rz-border-color-base-900

.rz-border-color-black

.rz-border-color-primary-lighter

.rz-border-color-primary-light

.rz-border-color-primary

.rz-border-color-primary-dark

.rz-border-color-primary-darker

.rz-border-color-secondary-lighter

.rz-border-color-secondary-light

.rz-border-color-secondary

.rz-border-color-secondary-dark

.rz-border-color-secondary-darker

.rz-border-color-info-lighter

.rz-border-color-info-light

.rz-border-color-info

.rz-border-color-info-dark

.rz-border-color-info-darker

.rz-border-color-success-lighter

.rz-border-color-success-light

.rz-border-color-success

.rz-border-color-success-dark

.rz-border-color-success-darker

.rz-border-color-warning-lighter

.rz-border-color-warning-light

.rz-border-color-warning

.rz-border-color-warning-dark

.rz-border-color-warning-darker

.rz-border-color-danger-lighter

.rz-border-color-danger-light

.rz-border-color-danger

.rz-border-color-danger-dark

.rz-border-color-danger-darker

.rz-border-color-series-1

.rz-border-color-series-2

.rz-border-color-series-3

.rz-border-color-series-4

.rz-border-color-series-5

.rz-border-color-series-6

.rz-border-color-series-7

.rz-border-color-series-8

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action