Background Color
The Telerik and Kendo UI Background Color Utilities are CSS classes that enable you to control the color of an element's background.
| Utility Class | CSS Property |
|---|---|
.k-bg-dark-emphasis | background-color: var(--kendo-color-dark-emphasis, #212529); |
.k-bg-inherit | background-color: inherit; |
.k-bg-transparent | background-color: transparent; |
.k-bg-black | background-color: black; |
.k-bg-white | background-color: white; |
.k-bg-app-surface | background-color: var(--kendo-color-app-surface, #fafafa); |
.k-bg-on-app-surface | background-color: var(--kendo-color-on-app-surface, #424242); |
.k-bg-subtle | background-color: var(--kendo-color-subtle, #666666); |
.k-bg-surface | background-color: var(--kendo-color-surface, #ffffff); |
.k-bg-surface-alt | background-color: var(--kendo-color-surface-alt, #f5f5f5); |
.k-bg-border | background-color: var(--kendo-color-border, #d9d9d9); |
.k-bg-border-alt | background-color: var(--kendo-color-border-alt, #e0e0e0); |
.k-bg-base-subtle | background-color: var(--kendo-color-base-subtle, #f0f0f0); |
.k-bg-base-emphasis | background-color: var(--kendo-color-base-emphasis, #000000); |
.k-bg-primary-subtle | background-color: var(--kendo-color-primary-subtle, #e3f2fd); |
.k-bg-primary | background-color: var(--kendo-color-primary, #2196f3); |
.k-bg-primary-emphasis | background-color: var(--kendo-color-primary-emphasis, #1976d2); |
.k-bg-secondary-subtle | background-color: var(--kendo-color-secondary-subtle, #f3e5f5); |
.k-bg-secondary | background-color: var(--kendo-color-secondary, #9c27b0); |
.k-bg-secondary-emphasis | background-color: var(--kendo-color-secondary-emphasis, #7b1fa2); |
.k-bg-tertiary-subtle | background-color: var(--kendo-color-tertiary-subtle, #fff3e0); |
.k-bg-tertiary | background-color: var(--kendo-color-tertiary, #ff9800); |
.k-bg-tertiary-emphasis | background-color: var(--kendo-color-tertiary-emphasis, #f57c00); |
.k-bg-info-subtle | background-color: var(--kendo-color-info-subtle, #e1f5fe); |
.k-bg-info | background-color: var(--kendo-color-info, #00bcd4); |
.k-bg-info-emphasis | background-color: var(--kendo-color-info-emphasis, #0097a7); |
.k-bg-success-subtle | background-color: var(--kendo-color-success-subtle, #e8f5e8); |
.k-bg-success | background-color: var(--kendo-color-success, #4caf50); |
.k-bg-success-emphasis | background-color: var(--kendo-color-success-emphasis, #388e3c); |
.k-bg-warning-subtle | background-color: var(--kendo-color-warning-subtle, #fff8e1); |
.k-bg-warning | background-color: var(--kendo-color-warning, #ff9800); |
.k-bg-warning-emphasis | background-color: var(--kendo-color-warning-emphasis, #f57c00); |
.k-bg-error-subtle | background-color: var(--kendo-color-error-subtle, #ffebee); |
.k-bg-error | background-color: var(--kendo-color-error, #f44336); |
.k-bg-error-emphasis | background-color: var(--kendo-color-error-emphasis, #d32f2f); |
.k-bg-light-subtle | background-color: var(--kendo-color-light-subtle, #f8f9fa); |
.k-bg-light | background-color: var(--kendo-color-light, #f8f9fa); |
.k-bg-light-emphasis | background-color: var(--kendo-color-light-emphasis, #dee2e6); |
.k-bg-dark-subtle | background-color: var(--kendo-color-dark-subtle, #6c757d); |
.k-bg-dark | background-color: var(--kendo-color-dark, #343a40); |
Applying a Background Color
Use the k-bg-{color} utilities to apply a background color. Replace {color} with the desired color variable, for example, k-bg-primary, k-bg-secondary, or k-bg-warning.
