Background Color Properties

Introduction

Background color properties are common properties in the Cosy UI component library, used to set the background color of components. Supports basic background colors, opacity variants, and gradient colors.

Basic Background Colors

Theme Colors

• primary - Primary color
• secondary - Secondary color
• accent - Accent color
• neutral - Neutral color

Base Colors

• base-100 - Base background color (light)
• base-200 - Base background color (medium)
• base-300 - Base background color (dark)

Status Colors

• success - Success color
• warning - Warning color
• error - Error color
• info - Info color

Special Values

• transparent - Transparent background
• none - No background

Opacity Variants

Each basic background color supports opacity variants in the format color/opacity:

Opacity Values

• 10 - 10% opacity
• 20 - 20% opacity
• 30 - 30% opacity
• 40 - 40% opacity
• 50 - 50% opacity
• 60 - 60% opacity
• 70 - 70% opacity
• 80 - 80% opacity
• 90 - 90% opacity

Examples

• primary/20 - Primary color with 20% opacity
• success/10 - Success color with 10% opacity
• error/30 - Error color with 30% opacity

Gradient Colors

Basic Gradients

• gradient - Default gradient (primary to secondary)
• gradient-primary - Primary color gradient
• gradient-secondary - Secondary color gradient
• gradient-accent - Accent color gradient

Status Gradients

• gradient-success - Success color gradient
• gradient-warning - Warning color gradient
• gradient-info - Info color gradient

Theme Gradients

• gradient-sky - Sky gradient
• gradient-sunset - Sunset gradient
• gradient-forest - Forest gradient
• gradient-ocean - Ocean gradient
• gradient-mountain - Mountain gradient

Fruit Gradients

• gradient-flower - Flower gradient
• gradient-watermelon - Watermelon gradient
• gradient-lemon - Lemon gradient
• gradient-grape - Grape gradient
• gradient-blueberry - Blueberry gradient
• gradient-mango - Mango gradient
• gradient-kiwi - Kiwi gradient
• gradient-pitaya - Pitaya gradient
• gradient-banana - Banana gradient

Pattern Backgrounds

Basic Patterns

• dot-grid - Subtle dot grid
• stripes - Diagonal stripes
• gradient-glow - Glow gradient

Modern Background Styles

• glassmorphism - Glassmorphism effect (frosted glass)
• glassmorphism-strong - Strong glassmorphism effect
• glassmorphism-soft - Soft glassmorphism effect
• mesh-gradient - Mesh gradient (multiple radial gradients overlay)
• noise - Noise texture
• noise-strong - Strong noise texture
• noise-soft - Soft noise texture
• animated-gradient - Animated gradient (flowing effect)
• animated-gradient-fast - Fast animated gradient
• animated-gradient-slow - Slow animated gradient

Example:

<Container background="dot-grid" padding="lg">
  Dot grid pattern background
</Container>

<Container background="stripes" padding="lg">
  Diagonal stripes background
</Container>

<Container background="gradient-glow" padding="lg">
  Glow gradient background
</Container>

<Container background="glassmorphism" padding="lg">
  Glassmorphism background
</Container>

<Container background="mesh-gradient" padding="lg">
  Mesh gradient background
</Container>

<Container background="noise" padding="lg">
  Noise texture background
</Container>

<Container background="animated-gradient" padding="lg">
  Animated gradient background
</Container>

Usage

In Components

<Container background="primary">
  Primary background
</Container>

<Container background="success/20">
  Success background with 20% opacity
</Container>

<Container background="gradient-sky">
  Sky gradient background
</Container>

<Container background="dot-grid">
  Pattern background (dot grid)
</Container>

In Builder Pattern

const props = ContainerProps()
  .background("primary/20")
  .build();

<Container {...props}>
  Builder pattern background
</Container>

Related Components

The following components support background color properties:

• Container - Container component
• Card - Card component
• Button - Button component
• Alert - Alert component
• Badge - Badge component
• Modal - Modal component