CSS Colors & Backgrounds

Text Color

Set text colour with the color property.

Background

Property	Description
`background-color`	Solid background colour
`background-image`	Image as background
`background-size`	`cover`, `contain`, pixels
`background-position`	Position: `center`, `top`, etc.
`background-repeat`	`no-repeat`, `repeat-x`

Gradients

CSS gradients create smooth transitions between colours: linear-gradient() and radial-gradient().

Example

body {
  background-color: #f8fafc;
}

.card {
  background-color: white;
  color: #111827;
}

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

.gradient {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned