Day 9 of My 100 Days of Web Dev — CSS Gradients, Backgrounds & Parent-Child Magic!

Today was all about adding colors, depth, and real-world visuals to my web pages using CSS. Slowly, I’m starting to see how design brings HTML to life

🧩 Day 9 of My 100 Days of Web Dev — CSS Gradients, Backgrounds & Parent-Child Magic!
Photo by Robert Katzki on Unsplash

🎨 1. Gradients: The Art of Smooth Color Blends

CSS gradients let us create smooth color transitions without using any image. There are three main types of gradients I explored today:

🔹 Linear Gradient

It blends colors in a straight line — horizontally, vertically, or diagonally.
Syntax:

background: linear-gradient(direction, color1, color2);
Example:

background: linear-gradient(to right, blue, pink);
This moves color smoothly from blue to pink.
You can also make one color appear more dominant by adjusting its position:

background: linear-gradient(to right, blue 30%, pink 70%);

🔹 Radial Gradient

This one spreads color from the center outward, like ripples in water.
Syntax:

background: radial-gradient(circle, red, yellow, green);

🔹 Conic Gradient

A circular sweep of colors, like a pie chart or rainbow wheel.
Syntax:

background: conic-gradient(red, yellow, green, blue);
All these effects can create stunning visual backgrounds — and yes, I’ve added a few demo screenshots to show how cool it looks 😍

🧱 2. Parent & Child Relationship in CSS

This was a real “aha!” moment for me.
If you give a child element a percentage-based height or width, it calculates it relative to its parent’s size — not the entire page.

Example:

.parent {
height: 400px;
width: 400px;
background-color: lightblue;
}

.child {
height: 50%;
width: 50%;
background-color: pink;
}
Here, the child div will take 50% height and width of the parent, not the whole window. Makes a big difference in responsive layouts!

🖼️ 3. Background Images and Properties

I also learned to add background images in CSS and control how they behave.

Basic syntax:

background-image: url('nature.jpg');
And then I played with these properties:

background-size: cover | contain | auto

background-position: top, center, bottom, or coordinates

background-repeat: no-repeat | repeat-x | repeat-y

These properties help to position, resize, or repeat the background image exactly as you want.

📏 4. Margin and Border

Two small but super important concepts!

Margin: creates imaginary space outside the element (keeps other things at a distance).

margin: 20px;

Border: defines the edge of an element. You can set its width, style, and color.

border: 2px solid black;

You can also play with border-radius for curves or circles — it adds that extra smoothness.

💡 Reflection

Today’s lesson really opened up how CSS can transform plain HTML boxes into actual designs. Gradients, margins, borders — all tiny details that together make the webpage feel alive. Tomorrow, I’m planning to dive deeper into positioning and layouts!