Colors & Backgrounds

Colors

CSS supports several ways to specify a color:

.a { color: red; }                      /* named color */
.b { color: #ff5733; }                  /* hex */
.c { color: #f53; }                     /* shorthand hex */
.d { color: rgb(255, 87, 51); }         /* rgb */
.e { color: rgba(255, 87, 51, 0.5); }   /* rgb with 50% opacity */
.f { color: hsl(9, 100%, 60%); }        /* hue, saturation, lightness */
.g { color: hsla(9, 100%, 60%, 0.5); }  /* hsl with opacity */

Color can be applied to more than just text:

.box {
  color: white;             /* text color */
  background-color: #1A1A2E; /* box background */
  border-color: #C41230;    /* border color */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

Background Properties

.hero {
  background-color: #1A1A2E;
  background-image: url("banner.jpg");
  background-repeat: no-repeat;   /* repeat | repeat-x | repeat-y | no-repeat */
  background-position: center;    /* top, bottom, left, right, center, or x% y% */
  background-size: cover;         /* cover | contain | 100% 100% | 300px auto */
  background-attachment: fixed;   /* fixed | scroll | local */
}

/* Shorthand — combines all of the above in one line */
.hero {
  background: #1A1A2E url("banner.jpg") no-repeat center / cover fixed;
}

/* Multiple backgrounds, layered */
.layered {
  background:
    url("overlay.png") no-repeat center,
    url("photo.jpg") no-repeat center / cover;
}

Gradients

Gradients are CSS-generated backgrounds — no image file needed.

/* Linear gradient */
.gold-to-maroon {
  background: linear-gradient(to right, #F5A623, #C41230);
}

/* Angle-based linear gradient */
.diagonal {
  background: linear-gradient(135deg, #F5A623, #C41230);
}

/* Multiple color stops */
.rainbow {
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

/* Radial gradient */
.spotlight {
  background: radial-gradient(circle, #F5A623, #1A1A2E);
}

Gradients can be used anywhere a background image can — including behind text with a background-clip trick, or as hover effects on buttons and cards.