Colors

Named colors

RGB function

• rgb(r, g, b)
• rgba(r, g, b, a)

HSL function

• hsl(h, s, l)
• hsla(h, s, l, a)

Hexadecimal literal

Gradient

CSS has really bad semantic in some use case, you'll have to memorize it.

Linear

• linear-gradient(color1, color2): linear transition from color1 to color2. From top to bottom by default.
• linear-gradient(<diection>, color1, color2): linear transition from color1 to color2 with direction.
  • linear-gradient(to right, color1, color2): to <right|left|top|bottom>
  • linear-gradient(45deg, color1, color1)

Radial

radial-gradient(color1, color2): radial transition from center for two colors.

radial-gradient(circle, color1, color2): force circle radial.

radial-gradient(circle at top left, color1, color2): force circle at position.

TIP

Don't do it by yourself, use this to generate gradients.