MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
During Diwali or school festival celebrations, have you ever watched an artist make a multi-colored Rangoli? They start with bright gulal powder (magenta) at one end, gently sprinkle orange in the middle, and blend it into deep golden yellow at the far edge. The colors flow smoothly into one another without any harsh break.
Now think about your school's sports day winner sash or caution tape: it doesn't blend softly at all. Instead, it has sharp, bold, repeating diagonal stripes of yellow and black!
+------------------------------------------------------------------------+ | TYPES OF CSS GRADIENTS | | | | 1. Soft Multi-Stop Blend: | | [ Crimson ] =====> [ Royal Blue ] =====> [ Emerald Green ] | | (Smooth transition along an angle or axis) | | | | 2. Hard Color Stops (Barber Pole / Caution Tape Stripes): | | | Black | Yellow | Black | Yellow | Black | Yellow | | | (Colors meet at exact same percentage stop; zero blur!) | | | | 3. Radial Spotlight / Glow: | | .---''''---. | | .' Bright '. | | / Center \ | | | (Glow) | | | \ Soft Fading / | | '. Edge .' | | '---....---' | +------------------------------------------------------------------------+
In basic CSS, you learned two-color gradients like linear-gradient(red, yellow). In this intermediate tutorial, you will master multi-stop color chaining, precise degree angles, hard stops for zero-image graphic patterns, and repeating gradients.
A linear gradient does not have to be limited to just two colors. You can supply three, four, or ten colors, and you can orient the flow at any exact mathematical angle!
Instead of vague directions like to right, professional web layouts use specific degree units (deg):
By default, the browser spaces color stops evenly. But you can define exact percentage or pixel boundaries:
What happens if two adjacent colors share the exact same percentage position? The blur disappears completely, giving you a crisp, sharp architectural edge!
Modern CSS allows you to write both the start and end positions in a single declaration:
While linear gradients travel along a straight vector line, radial gradients emanate outward from a central point like ripples in a pond or a stage spotlight.
radial-gradient()circle (equal radius in all directions) or ellipse (default; stretches to fit container aspect ratio).at center, at top left, at 30% 70%).closest-side: Gradient reaches only the nearest edge of the box.closest-corner: Gradient reaches the nearest corner.farthest-side: Gradient expands to the furthest edge.farthest-corner: (Default) Gradient fully blankets the furthest corner.repeating-linear-gradientWhen you want an infinite pattern—like school notebook rule lines, striped sports ribbons, or caution hazard tape—use repeating-linear-gradient() or repeating-radial-gradient().
Instead of running from 0% to 100%, a repeating gradient repeats infinitely as soon as the last color stop distance is reached:
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
linear-gradient(top, blue, red) | linear-gradient(to bottom, blue, red) or 180deg | The old prefix syntax without to is obsolete and broken in modern browsers. |
| Using heavy raster images (.png) for simple stripes or spotlight glows | Use repeating-linear-gradient() or radial-gradient() | CSS gradients load with 0 network HTTP requests and scale infinitely at retina resolution. |
Forgetting to provide a solid fallback background-color | Always specify background-color: #1e3a8a; before your gradient | Ensures readability if high-contrast modes or legacy engines disable backgrounds. |
| Making low-contrast text on top of multicolored gradients | Check contrast against both the lightest AND darkest color stops | If text crosses from yellow to dark indigo, pure white text will be invisible on the yellow portion! |
0deg points UP, 90deg points RIGHT, 180deg points DOWN, and 270deg points LEFT.#000 0%, #333 40%, #fff 100%).#ff0000 50%, #0000ff 50%) creates razor-sharp stripes without blurring.radial-gradient(shape at position, color1, color2). Default shape is ellipse; use circle for uniform glow.repeating-linear-gradient() with fixed pixel or rem stop distances to create infinite stripes, grids, and ribbons.radial-gradient() if no shape keyword is explicitly provided?repeating-linear-gradient() repeat its pattern across the element?Build an impressive, realistic Annual Sports Day award card utilizing:
repeating-linear-gradient() with diagonal gold-and-navy athletic stripes.radial-gradient() spotlight effect.135deg) that creates a sleek, professional certificate look.Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.