🎨 Colors & Backgrounds

Styling with Colors

CSS Colors & Backgrounds

Learn how to use colors and backgrounds effectively in CSS to create visually appealing designs.

💻 Color Values

Named Colors

h1 {
    color: red;
}

p {
    color: blue;
}

/* 140+ named colors available */
.box {
    background-color: coral;
    color: white;
}

Hexadecimal (Hex)

/* #RRGGBB format */
h1 {
    color: #ff0000;  /* Red */
}

p {
    color: #00ff00;  /* Green */
}

/* Shorthand when pairs are same */
.box {
    color: #f00;     /* Same as #ff0000 */
    background: #0f0; /* Same as #00ff00 */
}

/* With alpha (transparency) */
.overlay {
    background-color: #00000080;  /* 50% transparent black */
}

RGB & RGBA

/* rgb(red, green, blue) - values 0-255 */
h1 {
    color: rgb(255, 0, 0);  /* Red */
}

p {
    color: rgb(0, 128, 255);  /* Blue */
}

/* rgba(red, green, blue, alpha) - alpha 0-1 */
.box {
    background-color: rgba(0, 0, 0, 0.5);  /* 50% transparent black */
}

.overlay {
    background-color: rgba(255, 255, 255, 0.9);  /* 90% opaque white */
}

HSL & HSLA

/* hsl(hue, saturation%, lightness%) */
h1 {
    color: hsl(0, 100%, 50%);    /* Red */
}

p {
    color: hsl(240, 100%, 50%);  /* Blue */
}

/* hsla with alpha */
.box {
    background-color: hsla(120, 100%, 50%, 0.5);  /* 50% transparent green */
}

/* HSL is great for color variations */
.primary { background: hsl(200, 80%, 50%); }
.primary-light { background: hsl(200, 80%, 70%); }
.primary-dark { background: hsl(200, 80%, 30%); }

🖼️ Background Properties

Background Color

body {
    background-color: #f0f0f0;
}

.box {
    background-color: rgba(0, 123, 255, 0.1);
}

Background Image

/* Single image */
.hero {
    background-image: url('hero-bg.jpg');
}

/* Multiple backgrounds (comma-separated) */
.pattern {
    background-image: 
        url('pattern.png'),
        linear-gradient(to bottom, #fff, #eee);
}

Background Repeat

.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;      /* Default */
}

.banner {
    background-image: url('logo.png');
    background-repeat: no-repeat;   /* Show once */
}

.stripes {
    background-image: url('stripe.png');
    background-repeat: repeat-x;    /* Horizontal only */
    /* or repeat-y for vertical */
}

Background Position

/* Keywords */
.hero {
    background-position: center;
    background-position: top right;
    background-position: bottom left;
}

/* Percentages */
.banner {
    background-position: 50% 50%;  /* Center */
}

/* Pixels */
.logo {
    background-position: 10px 20px;
}

Background Size

/* Keywords */
.hero {
    background-size: cover;   /* Cover entire area */
}

.thumbnail {
    background-size: contain; /* Fit within area */
}

/* Specific dimensions */
.banner {
    background-size: 300px 200px;
}

/* Percentage */
.pattern {
    background-size: 50% auto;
}

Background Attachment

/* Parallax effect */
.parallax {
    background-attachment: fixed;
}

/* Default - scrolls with page */
.normal {
    background-attachment: scroll;
}

/* Scrolls with element content */
.local {
    background-attachment: local;
}

Background Shorthand

/* Shorthand: bg-color bg-image position/size repeat attachment */
.hero {
    background: #333 url('hero.jpg') center/cover no-repeat fixed;
}

/* Another example */
.card {
    background: linear-gradient(to right, #667eea, #764ba2) no-repeat;
}

🎨 Gradients

Linear Gradient

/* Simple gradient */
.box {
    background: linear-gradient(to right, red, blue);
}

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

/* Angle */
.diagonal {
    background: linear-gradient(45deg, #667eea, #764ba2);
}

/* Color stops */
.sunset {
    background: linear-gradient(
        to bottom,
        #ff6b6b 0%,
        #ffa500 50%,
        #4ecdc4 100%
    );
}

Radial Gradient

/* Circular gradient */
.circle {
    background: radial-gradient(circle, red, blue);
}

/* Ellipse */
.ellipse {
    background: radial-gradient(ellipse, yellow, green);
}

/* Position */
.spotlight {
    background: radial-gradient(
        circle at top left,
        white, transparent
    );
}

/* Size */
.glow {
    background: radial-gradient(
        circle closest-side,
        rgba(255,255,255,0.8),
        transparent
    );
}

Conic Gradient

/* Pie chart style */
.pie {
    background: conic-gradient(
        red 0deg 120deg,
        blue 120deg 240deg,
        green 240deg 360deg
    );
}

/* Color wheel */
.wheel {
    background: conic-gradient(
        from 0deg,
        red, yellow, green, cyan, blue, magenta, red
    );
}

🎯 Practical Examples

/* Hero section with gradient overlay */
.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('hero-bg.jpg') center/cover no-repeat;
    color: white;
    padding: 100px 20px;
    text-align: center;
}

/* Card with gradient border */
.card {
    background: white;
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: inherit;
    z-index: -1;
}

/* Glassmorphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Pattern background */
.pattern {
    background-color: #667eea;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(255,255,255,.1) 35px,
        rgba(255,255,255,.1) 70px
    );
}

🎯 Key Takeaways