DEV Community

bblackwind
bblackwind

Posted on

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

#css #webdev #fullstack #frontend


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 plain HTML to life 🎨

🎨 1. Gradients — The Art of Smooth Color Blends

CSS gradients help us create smooth color transitions without using images.
Today I explored the three major types:

🔹 Linear Gradient

Blends colors in a straight line (horizontal, vertical, or diagonal).

Syntax:


background: linear-gradient(direction, color1, color2);
Enter fullscreen mode Exit fullscreen mode

Example:


background: linear-gradient(to right, blue, pink);
Enter fullscreen mode Exit fullscreen mode

You can control how dominant each color is:

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

🔹 Radial Gradient

Creates a gradient that spreads from the center outward, like water ripples.


background: radial-gradient(circle, red, yellow, green);
Enter fullscreen mode Exit fullscreen mode

🔹 Conic Gradient

Creates a circular color sweep, similar to pie charts or color wheels.

background: conic-gradient(red, yellow, green, blue);
Enter fullscreen mode Exit fullscreen mode

Gradients instantly add visual interest — I even tested them with mini demo boxes I created today 😍

🧱 2. Parent & Child Relationship in CSS

This was a big “aha!” moment for me.

When you use percentage-based height/width on a child element, it always calculates relative to the parent, not the whole page.

Example:

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

.child {
  height: 50%;
  width: 50%;
  background-color: pink;
}
Enter fullscreen mode Exit fullscreen mode

Here, the child div becomes 50% of the parent, not 50% of the screen.
This is super important for responsive layouts!

🖼️ 3. Background Images & Their Properties

Adding background images with CSS is simple:

background-image: url("nature.jpg");
Enter fullscreen mode Exit fullscreen mode

Then I explored the main properties:

🎯 background-size

cover (fills area, cropping allowed)

contain (fits entire image, no cropping)

auto (default)

🎯 background-position

top

center

bottom

or custom coordinates

🎯 background-repeat

no-repeat

repeat-x

repeat-y

These tools give full control over how the image looks on the page.

📏 4. Margin & Border

Small concepts with huge design impact.

➤ Margin

Creates space outside the element:

margin: 20px;
Enter fullscreen mode Exit fullscreen mode

➤ Border

Defines the element’s edge:

border: 2px solid black;
Enter fullscreen mode Exit fullscreen mode

You can even use:

border-radius: 50%;
Enter fullscreen mode Exit fullscreen mode

to create circles and smooth corners.

💡 Reflection

Day 9 helped me understand how simple CSS rules can transform dull HTML boxes into beautiful UI components.

Gradients, background images, margins, and borders — together they make a page feel designed, not just built.

Tomorrow, I’ll be diving deeper into layouts & positioning.
Let’s keep building, one day at a time! 🚀

Top comments (0)