Background-Colors & Gradients

← Back to Index

Using background-color property

HTML Syntax:

  • Background-Color by Name:
    • <body style="background-color: lightblue;">
  • Background-Color by Hex:
    • <body style="background-color: #ADD8E6;">
  • Background-Color by RGB:
    • <body style="background-color: rgb(173, 216, 230);">

CSS Syntax:

  • Background-Color by Name:
    • body { 
  background-color: lightblue; 
}
  • Background-Color by Hex:
    • body { 
  background-color: #ADD8E6;
}
  • Background-Color by RGB:
    • body { 
  background-color: rgb(173, 216, 230);
}

CSS Color Formats Reference

  • Color Names : Basic color keywords : black, white, gray, etc.
  • Hexadecimal : Six-digit color codes : #000000 - #FFFFFF
  • RGB : Red, Green, Blue values : rgb($red, $green, $blue)
  • RGBA : RGB with Alpha channel : rgba($red, $green, $blue, $alpha)
  • HSL : Hue, Saturation, Lightness : hsl($hue, $saturation, $lightness)
  • HSLA : HSL with Alpha channel : hsla($hue, $saturation, $lightness, $alpha)

Using Gradients:


HTML Syntax:

  • Linear Gradient:
    • <body style="background: linear-gradient(to right, red, blue);">
  • Radial Gradient:
    • <body style="background: radial-gradient(circle, red, yellow, green);">

CSS Syntax:

  • Linear Gradient:
    • body {
  background: linear-gradient(to right, red, blue);
}
  • Radial Gradient:
    • body {
  background: radial-gradient(circle, red, yellow, green);
}

Valid Values for Gradient Properties:

  • Linear Gradients:
    • Direction:
      • Standard Keywords:
        • to right - flows left to right
        • to left - flows right to left
        • to top - flows bottom to top
        • to bottom - flows top to bottom
        • to top right - diagonal from bottom left to top right
        • to bottom left - diagonal from top right to bottom left
      • Fixed Values:
        • angle values - e.g., 45deg, 90deg, 180deg
      • Global Values:
        • initial - default value
        • inherit - inherits from parent
    • Color Stops:
      • Valid Formats:
        • Named Colors - e.g., red, blue, green
        • Hex Values - e.g., #FF0000, #0000FF
        • RGB/RGBA - e.g., rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
        • HSL/HSLA - e.g., hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
      • Optional Values:
        • percentage - e.g., red 20%
        • length - e.g., blue 50px
  • Radial Gradients:
    • Shape:
      • Standard Keywords:
        • circle - creates a circular gradient
        • ellipse - creates an elliptical gradient
      • Global Values:
        • initial - default value
        • inherit - inherits from parent
    • Size:
      • Standard Keywords:
        • closest-side - extends to the closest side
        • farthest-corner - extends to the farthest corner
        • closest-corner - extends to the nearest corner
        • farthest-side - extends to the farthest side
      • Fixed Values:
        • explicit sizes - e.g., 50%, 100px
    • Position:
      • Standard Keywords:
        • at center - centers the gradient
        • at top - aligns to the top edge
        • at bottom - aligns to the bottom edge
        • at left - aligns to the left edge
        • at right - aligns to the right edge
        • at top left - aligns to the top left corner
        • at bottom right - aligns to the bottom right corner
      • Responsive Values:
        • coordinate values - e.g., 25% 75%, 20px 50px
    • Color Stops:
      • Valid Formats:
        • Named Colors, Hex Values, RGB/RGBA, HSL/HSLA
      • Optional Values:
        • percentage and length values - e.g., red 20%, blue 50px
  • Global Gradient Values:
    • initial - default value
    • inherit - inherits from parent

Examples:

Background-Color (by Name)

This example shows how to style a light blue background color using a named color.

body {
  background-color: lightblue;
}

Background-Color (by Hex)

This example shows how to style a peach colored background using a hex value.

body {
  background-color: #FFC196;
}

Background-Color (by RGB)

This example shows how to style a warm yellow background using RGB values.

body {
  background-color: rgb(255,246,150);
}

Linear Gradient

This example shows a linear gradient from red to yellow.

background: linear-gradient(to right, red, yellow);

Radial Gradient

This example shows a radial gradient from red to yellow.

body {
  background: radial-gradient(circle, red, yellow);
}

Spiral Gradient

This example shows a spiral gradient effect.

background: conic-gradient(red, yellow, green, blue, red);