Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Colors & Gradients
Colors define the mood and brand of your website. CSS offers multiple color formats and powerful gradient capabilities for creating beautiful backgrounds without images. Learn hex, RGB, HSL, gradients, and modern color functions.
Color Systems & Gradients
- Hex - #E44D26 (6-digit), #E44 (3-digit shorthand), #E44D26CC (8-digit with alpha/opacity)
- RGB/RGBA - rgb(228, 77, 38), rgba(228, 77, 38, 0.8). Values 0-255 per channel
- HSL/HSLA - hsl(14, 82%, 52%). Hue (color wheel 0-360°), Saturation (0-100%), Lightness (0-100%). Easiest to adjust
- Linear gradient - background: linear-gradient(135deg, #667eea, #764ba2). Direction + color stops
- Radial gradient - background: radial-gradient(circle, #667eea, #764ba2). Circular/elliptical gradients
- Multi-stop gradients - linear-gradient(to right, red, orange, yellow, green). Add color stops at specific percentages
- currentColor - Inherits the element's color value. Useful for borders and SVGs: border: 1px solid currentColor
Gradient Examples
/* Linear gradients */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Gradient text */
.gradient-text {
background: linear-gradient(90deg, #E44D26, #f39c12);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Gradient border trick */
.gradient-border {
border: 3px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #667eea, #764ba2) border-box;
border-radius: 12px;
}
/* Overlay gradient on image */
.card-image {
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent),
url('image.jpg') center/cover;
}
/* Subtle background gradient */
body {
background: linear-gradient(180deg, #f0f4f8 0%, #e2e8f0 100%);
min-height: 100vh;
}Tip
Define your color palette as CSS custom properties: --color-primary: hsl(14, 82%, 52%). To create a lighter variant, just change the lightness value - much easier than recalculating hex. Then use the variable everywhere for instant global color changes.
CSS variables enable theming and dark mode without preprocessors
Common Mistake
Using hex colors without a system leads to subtle inconsistency - #e44d26 on one button, #e34c25 on another. Define a fixed palette of 5-8 colors as CSS variables and use only those values. This keeps your design consistent and brand-accurate.
Practice Task
Create 3 cards each with a different gradient: (1) diagonal linear-gradient(135deg), (2) a radial-gradient, (3) a multi-stop gradient with 3+ colors. Then apply gradient text to each card's heading using background-clip: text and -webkit-text-fill-color: transparent.
Quick Quiz
Key Takeaways
- Colors define the mood and brand of your website.
- Hex - #E44D26 (6-digit), #E44 (3-digit shorthand), #E44D26CC (8-digit with alpha/opacity)
- RGB/RGBA - rgb(228, 77, 38), rgba(228, 77, 38, 0.8). Values 0-255 per channel
- HSL/HSLA - hsl(14, 82%, 52%). Hue (color wheel 0-360°), Saturation (0-100%), Lightness (0-100%). Easiest to adjust