Docs / Background Color

Background Color

vel-src: colors.css

Utilities for controlling an element's background color.

ClassProperties
vel-bg-primarybackground-color: var(--vel-color-primary)
vel-bg-secondarybackground-color: var(--vel-color-secondary)
vel-bg-successbackground-color: var(--vel-color-success)
vel-bg-dangerbackground-color: var(--vel-color-danger)
vel-bg-warningbackground-color: var(--vel-color-warning)
vel-bg-infobackground-color: var(--vel-color-info)
vel-bg-primary-lightbackground-color: var(--vel-color-primary-light)
vel-bg-success-lightbackground-color: var(--vel-color-success-light)
vel-bg-danger-lightbackground-color: var(--vel-color-danger-light)
vel-bg-warning-lightbackground-color: var(--vel-color-warning-light)
vel-bg-info-lightbackground-color: var(--vel-color-info-light)
vel-bg-neutral-50background-color: var(--vel-neutral-50)
vel-bg-neutral-100background-color: var(--vel-neutral-100)
vel-bg-neutral-200background-color: var(--vel-neutral-200)
vel-bg-neutral-300background-color: var(--vel-neutral-300)
vel-bg-neutral-400background-color: var(--vel-neutral-400)
vel-bg-neutral-500background-color: var(--vel-neutral-500)
vel-bg-neutral-600background-color: var(--vel-neutral-600)
vel-bg-neutral-700background-color: var(--vel-neutral-700)
vel-bg-neutral-800background-color: var(--vel-neutral-800)
vel-bg-neutral-900background-color: var(--vel-neutral-900)
vel-bg-neutral-950background-color: var(--vel-neutral-950)
vel-bg-whitebackground-color: #ffffff
vel-bg-blackbackground-color: #000000
vel-bg-transparentbackground-color: transparent

Examples

Semantic background colors

example.html
<div style="display:flex;gap:8px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div class="vel-bg-primary" style="width:60px;height:60px;border-radius:6px;"></div>
  <div class="vel-bg-secondary" style="width:60px;height:60px;border-radius:6px;"></div>
  <div class="vel-bg-success" style="width:60px;height:60px;border-radius:6px;"></div>
  <div class="vel-bg-danger" style="width:60px;height:60px;border-radius:6px;"></div>
  <div class="vel-bg-warning" style="width:60px;height:60px;border-radius:6px;"></div>
  <div class="vel-bg-info" style="width:60px;height:60px;border-radius:6px;"></div>
</div>

Neutral scale

example.html
<div style="display:flex;gap:4px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div class="vel-bg-neutral-100" style="width:40px;height:40px;border-radius:4px;"></div>
  <div class="vel-bg-neutral-300" style="width:40px;height:40px;border-radius:4px;"></div>
  <div class="vel-bg-neutral-500" style="width:40px;height:40px;border-radius:4px;"></div>
  <div class="vel-bg-neutral-700" style="width:40px;height:40px;border-radius:4px;"></div>
  <div class="vel-bg-neutral-900" style="width:40px;height:40px;border-radius:4px;"></div>
</div>