CSS · Fundamentals

Colors & Backgrounds

Master color formats, background properties, and create beautiful designs

Find videos you like?

Save to resource drawer for future reference!

CSS Colors & Backgrounds

The foundation of visual design

Colors Bring Life to Your Design

CSS offers multiple ways to define colors and backgrounds. From simple color names to complex gradients and images - you have complete control over how your elements look.

Text Colors

Control the color of text content using the color property

Backgrounds

Set solid colors, gradients, or images using various background properties

Color Formats

Different ways to specify colors in CSS

Named Colors

Use built-in color names (140+ available)

red

blue

green

Hexadecimal

Six-digit color codes with # prefix

#FF5733

#3498DB

#2ECC71

RGB

Red, Green, Blue values (0-255)

rgb(255, 87, 51)rgb(52, 152, 219)rgb(46, 204, 113)

RGBA (with transparency) ⭐

RGB + Alpha channel (0-1 for opacity)

rgba(255, 87, 51, 0.8)rgba(52, 152, 219, 0.5)rgba(46, 204, 113, 0.3)

Recommended Format

Use Hex for solid colors (#FF5733) and RGBA for transparency (rgba(255, 87, 51, 0.8)). These are the most commonly used formats in modern CSS.

Text Color Property

Changing text colors

Text Color Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Text Colors</h1>
      <div class="color-box red-text">
        <strong>Named Color:</strong> This text is red<br>
        <code>color: red;</code>
      </div>
      <div class="color-box hex-color">
        <strong>Hex Color:</strong> This text is blue using hex<br>
        <code>color: #3498DB;</code>
      </div>
      <div class="color-box rgb-color">
        <strong>RGB Color:</strong> This text is green using RGB<br>
        <code>color: rgb(46, 204, 113);</code>
      </div>
      <div class="color-box rgba-color">
        <strong>RGBA Color:</strong> This text has transparency<br>
        <code>color: rgba(231, 76, 60, 0.7);</code>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Background Properties

Styling element backgrounds

background-color

blue

Sets a solid background color

background-color: #3498DB;

background-image

green

Sets a background image or gradient

background-image: url("image.jpg");

background-size

purple

Controls the size of background image

background-size: cover;

background-position

orange

Positions the background image

background-position: center;

background-repeat

red

Controls if/how background repeats

background-repeat: no-repeat;

Shorthand Property

You can use the background shorthand to set multiple properties at once:

background: #3498DB url("bg.jpg") center/cover no-repeat;

Background Examples

Solid colors and gradients

Background Colors & Gradients

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="grid">
      <div class="card solid">
        <div>
          Solid Color
          <code>#3498DB</code>
        </div>
      </div>
      <div class="card gradient-1">
        <div>
          Purple Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-2">
        <div>
          Pink Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-3">
        <div>
          Blue Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-4">
        <div>
          Green Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-5">
        <div>
          Sunset Gradient
          <code>linear-gradient</code>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Remember

Use hex (#FF5733) for solid colors and RGBA for transparency

color property changes text color

background-color fills the element's background

Linear gradients create smooth color transitions

Previous Topic

Visibility & Opacity

Visibility, opacity, pointer-events, and element hiding techniques.

Next Topic

Modern Color Formats

oklch(), oklab(), color-mix(), relative colors, and wide-gamut color spaces (P3, Rec2020).

Ask a Question

Have a question about Colors & Backgrounds? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Fundamentals

Colors & Backgrounds

Master color formats, background properties, and create beautiful designs

Find videos you like?

Save to resource drawer for future reference!

CSS Colors & Backgrounds

The foundation of visual design

Colors Bring Life to Your Design

CSS offers multiple ways to define colors and backgrounds. From simple color names to complex gradients and images - you have complete control over how your elements look.

Text Colors

Control the color of text content using the color property

Backgrounds

Set solid colors, gradients, or images using various background properties

Color Formats

Different ways to specify colors in CSS

Named Colors

Use built-in color names (140+ available)

red

blue

green

Hexadecimal

Six-digit color codes with # prefix

#FF5733

#3498DB

#2ECC71

RGB

Red, Green, Blue values (0-255)

rgb(255, 87, 51)rgb(52, 152, 219)rgb(46, 204, 113)

RGBA (with transparency) ⭐

RGB + Alpha channel (0-1 for opacity)

rgba(255, 87, 51, 0.8)rgba(52, 152, 219, 0.5)rgba(46, 204, 113, 0.3)

Recommended Format

Use Hex for solid colors (#FF5733) and RGBA for transparency (rgba(255, 87, 51, 0.8)). These are the most commonly used formats in modern CSS.

Text Color Property

Changing text colors

Text Color Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Text Colors</h1>
      <div class="color-box red-text">
        <strong>Named Color:</strong> This text is red<br>
        <code>color: red;</code>
      </div>
      <div class="color-box hex-color">
        <strong>Hex Color:</strong> This text is blue using hex<br>
        <code>color: #3498DB;</code>
      </div>
      <div class="color-box rgb-color">
        <strong>RGB Color:</strong> This text is green using RGB<br>
        <code>color: rgb(46, 204, 113);</code>
      </div>
      <div class="color-box rgba-color">
        <strong>RGBA Color:</strong> This text has transparency<br>
        <code>color: rgba(231, 76, 60, 0.7);</code>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Background Properties

Styling element backgrounds

background-color

blue

Sets a solid background color

background-color: #3498DB;

background-image

green

Sets a background image or gradient

background-image: url("image.jpg");

background-size

purple

Controls the size of background image

background-size: cover;

background-position

orange

Positions the background image

background-position: center;

background-repeat

red

Controls if/how background repeats

background-repeat: no-repeat;

Shorthand Property

You can use the background shorthand to set multiple properties at once:

background: #3498DB url("bg.jpg") center/cover no-repeat;

Background Examples

Solid colors and gradients

Background Colors & Gradients

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="grid">
      <div class="card solid">
        <div>
          Solid Color
          <code>#3498DB</code>
        </div>
      </div>
      <div class="card gradient-1">
        <div>
          Purple Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-2">
        <div>
          Pink Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-3">
        <div>
          Blue Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-4">
        <div>
          Green Gradient
          <code>linear-gradient</code>
        </div>
      </div>
      <div class="card gradient-5">
        <div>
          Sunset Gradient
          <code>linear-gradient</code>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Remember

Use hex (#FF5733) for solid colors and RGBA for transparency

color property changes text color

background-color fills the element's background

Linear gradients create smooth color transitions

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Visibility & Opacity

Modern Color Formats

Building Your Learning Module...

Colors & Backgrounds

Colors Bring Life to Your Design

Text Colors

Backgrounds

Recommended Format

Text Color Examples

Shorthand Property

Background Colors & Gradients

Remember

Visibility & Opacity

Modern Color Formats

Colors & Backgrounds

Colors Bring Life to Your Design

Text Colors

Backgrounds

Recommended Format

Text Color Examples

Shorthand Property

Background Colors & Gradients

Remember