turretcss

Background Color


Background Color

Class Description
background-transparent Applies background: transparent; to element
background-current-color Applies background-color: currentColor; to element
background-inherit Applies background-color: inherit; to element
Base Background
<div class="background">...</div>

Colors

White
Black
<div class="background-white">...</div>
<div class="background-black">...</div>

Shades

Light

Light
Light
50
Light
100
Light
200
Light
300
Light
400
Light
500
Light
600
Light
700
Light
800
Light
900
<div class="background-light">...</div>
<div class="background-light-50">...</div>
<div class="background-light-100">...</div>
<div class="background-light-200">...</div>
<div class="background-light-300">...</div>
<div class="background-light-400">...</div>
<div class="background-light-500">...</div>
<div class="background-light-600">...</div>
<div class="background-light-700">...</div>
<div class="background-light-800">...</div>
<div class="background-light-900">...</div>

Grey

Grey
Grey
50
Grey
100
Grey
200
Grey
300
Grey
400
Grey
500
Grey
600
Grey
700
Grey
800
Grey
900
<div class="background-grey">...</div>
<div class="background-grey-50">...</div>
<div class="background-grey-100">...</div>
<div class="background-grey-200">...</div>
<div class="background-grey-300">...</div>
<div class="background-grey-400">...</div>
<div class="background-grey-500">...</div>
<div class="background-grey-600">...</div>
<div class="background-grey-700">...</div>
<div class="background-grey-800">...</div>
<div class="background-grey-900">...</div>

Dark

Dark
Dark
50
Dark
100
Dark
200
Dark
300
Dark
400
Dark
500
Dark
600
Dark
700
Dark
800
Dark
900
<div class="background-dark">...</div>
<div class="background-dark-50">...</div>
<div class="background-dark-100">...</div>
<div class="background-dark-200">...</div>
<div class="background-dark-300">...</div>
<div class="background-dark-400">...</div>
<div class="background-dark-500">...</div>
<div class="background-dark-600">...</div>
<div class="background-dark-700">...</div>
<div class="background-dark-800">...</div>
<div class="background-dark-900">...</div>

Palettes

Primary

Primary
Primary
50
Primary
100
Primary
200
Primary
300
Primary
400
Primary
500
Primary
600
Primary
700
Primary
800
Primary
900
<div class="background-primary">...</div>
<div class="background-primary-50">...</div>
<div class="background-primary-100">...</div>
<div class="background-primary-200">...</div>
<div class="background-primary-300">...</div>
<div class="background-primary-400">...</div>
<div class="background-primary-500">...</div>
<div class="background-primary-600">...</div>
<div class="background-primary-700">...</div>
<div class="background-primary-800">...</div>
<div class="background-primary-900">...</div>

Secondary

Secondary
Secondary
50
Secondary
100
Secondary
200
Secondary
300
Secondary
400
Secondary
500
Secondary
600
Secondary
700
Secondary
800
Secondary
900
<div class="background-secondary">...</div>
<div class="background-secondary-50">...</div>
<div class="background-secondary-100">...</div>
<div class="background-secondary-200">...</div>
<div class="background-secondary-300">...</div>
<div class="background-secondary-400">...</div>
<div class="background-secondary-500">...</div>
<div class="background-secondary-600">...</div>
<div class="background-secondary-700">...</div>
<div class="background-secondary-800">...</div>
<div class="background-secondary-900">...</div>

Tertiary

Tertiary
Tertiary
50
Tertiary
100
Tertiary
200
Tertiary
300
Tertiary
400
Tertiary
500
Tertiary
600
Tertiary
700
Tertiary
800
Tertiary
900
<div class="background-tertiary">...</div>
<div class="background-tertiary-50">...</div>
<div class="background-tertiary-100">...</div>
<div class="background-tertiary-200">...</div>
<div class="background-tertiary-300">...</div>
<div class="background-tertiary-400">...</div>
<div class="background-tertiary-500">...</div>
<div class="background-tertiary-600">...</div>
<div class="background-tertiary-700">...</div>
<div class="background-tertiary-800">...</div>
<div class="background-tertiary-900">...</div>

Indicators

Error

Error
Error
50
Error
100
Error
200
Error
300
Error
400
Error
500
Error
600
Error
700
Error
800
Error
900
<div class="background-error">...</div>
<div class="background-error-50">...</div>
<div class="background-error-100">...</div>
<div class="background-error-200">...</div>
<div class="background-error-300">...</div>
<div class="background-error-400">...</div>
<div class="background-error-500">...</div>
<div class="background-error-600">...</div>
<div class="background-error-700">...</div>
<div class="background-error-800">...</div>
<div class="background-error-900">...</div>

Warning

Warning
Warning
50
Warning
100
Warning
200
Warning
300
Warning
400
Warning
500
Warning
600
Warning
700
Warning
800
Warning
900
<div class="background-warning">...</div>
<div class="background-warning-50">...</div>
<div class="background-warning-100">...</div>
<div class="background-warning-200">...</div>
<div class="background-warning-300">...</div>
<div class="background-warning-400">...</div>
<div class="background-warning-500">...</div>
<div class="background-warning-600">...</div>
<div class="background-warning-700">...</div>
<div class="background-warning-800">...</div>
<div class="background-warning-900">...</div>

Success

Success
Success
50
Success
100
Success
200
Success
300
Success
400
Success
500
Success
600
Success
700
Success
800
Success
900
<div class="background-success">...</div>
<div class="background-success-50">...</div>
<div class="background-success-100">...</div>
<div class="background-success-200">...</div>
<div class="background-success-300">...</div>
<div class="background-success-400">...</div>
<div class="background-success-500">...</div>
<div class="background-success-600">...</div>
<div class="background-success-700">...</div>
<div class="background-success-800">...</div>
<div class="background-success-900">...</div>

Info

Info
Info
50
Info
100
Info
200
Info
300
Info
400
Info
500
Info
600
Info
700
Info
800
Info
900
<div class="background-info">...</div>
<div class="background-info-50">...</div>
<div class="background-info-100">...</div>
<div class="background-info-200">...</div>
<div class="background-info-300">...</div>
<div class="background-info-400">...</div>
<div class="background-info-500">...</div>
<div class="background-info-600">...</div>
<div class="background-info-700">...</div>
<div class="background-info-800">...</div>
<div class="background-info-900">...</div>