Background & Elevation

Utilities to add depth to UI using background colors and shadows.

Background Colors

Express UI hierarchy with various levels of background colors:

SCSS

@use 'podo-ui/mixin' as *;

.container {
  background: color(bg-modal);
}

.card {
  background: color(bg-block);
}

.elevated {
  background: color(bg-elevation);
}

.elevated1 {
  background: color(bg-elevation-1);
}

.disabled {
  background: color(bg-disabled);
}

Background Examples:

bg-modalModals & Popups

bg-blockCards & Blocks

bg-elevation1st Level Elevation

bg-elevation-12nd Level Elevation

Elevation Levels

Create various elevation effects by combining background colors and shadows:

Elevation Examples:

Level 0

Basic background, no shadow

Level 1

Light shadow with background

Level 2

Stronger shadow with background

Shadows

Add depth to elements using box-shadow:

SCSS

@use 'podo-ui/mixin' as *;

.card {
  background: color(bg-modal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.floatingButton {
  background: color(primary);
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);

  &:hover {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  }
}

Shadow Examples:

Shadow 1

Shadow 2

Shadow 3

Shadow 4

Real World Examples

Practical UI component examples using backgrounds and shadows:

Basic Card

A basic card without shadows.

Shadow Card

A card with light shadow applied.

Elevated Card

A card with both background and shadow.

Podo UI