Test Post

AMDE 155 / CSS LAB 02

CSS Gradients
Part 2

Move beyond simple color transitions. Build layered backgrounds, geometric patterns, color wheels, and animated effects using CSS alone.

01 / Color Stops 02 / Layers 03 / Conic 04 / Motion

01 / Start Here

In Part 1, you explored linear and radial gradients. Now we’ll use those same tools in more creative ways. You’ll learn how to control exactly where colors change, combine multiple gradients, make repeating patterns, and animate a gradient background.

What you’ll learn

Control color stops and hard edges.
Layer multiple background images.
Create conic and repeating gradients.
Animate a gradient effect.

What you’ll need

A browser and your CodePen account.
Your HTML and CSS skills from previous lessons.
A small color palette of your choice.

Remember: A gradient is generated by the browser. You don’t need to download an image or create a Photoshop file. Gradients can be used anywhere CSS accepts an image, including an element’s background.

02 / Control Your Color Stops

A color stop tells the browser where a particular color should appear in the gradient. Without percentages, CSS distributes the colors evenly. Adding percentages gives you more control over the composition.

background: linear-gradient( 90deg, #14213d 0%, #00b4d8 38%, #c8ff3d 72%, #ff82c8 100% );

Try it: Change 38% to 20%, then change 72% to 85%. Watch how the bands of color expand and contract.

Earlier stop: the color transition begins sooner.
Later stop: the color occupies more of the gradient’s path.
Repeated stop positions: can create a sharp boundary instead of a smooth blend.

03 / Make Hard Edges

Gradients don’t always have to be smooth. You can use repeated color-stop positions to create crisp stripes, graphic divisions, and poster-like compositions.

background: linear-gradient( 90deg, #101b35 0% 25%, #75cfff 25% 50%, #ff9c55 50% 75%, #ff82c8 75% 100% );

This technique is useful for bold editorial layouts, geometric illustrations, and interface elements that need clearly separated colors.

04 / Layer Multiple Gradients

You can put more than one gradient in a single background declaration. Separate each gradient with a comma. The first layer is painted on top of the following layers.

background: radial-gradient( circle at 20% 25%, #ff82c8 0%, transparent 36% ), radial-gradient( circle at 80% 70%, #75cfff 0%, transparent 40% ), linear-gradient( 135deg, #101b35, #263b60 );

How it works:

The first radial gradient creates a pink glow in the upper-left area.
The second creates a blue glow in the lower-right area.
The linear gradient provides the dark base behind both glows.

Experiment: Move the radial-gradient positions, change their colors, and adjust the percentages where each glow becomes transparent. Transparency allows the layers below to show through.

05 / Explore Conic Gradients

A conic gradient changes color as it rotates around a center point. Think of a color wheel, a radar graphic, or a circular chart. Unlike a radial gradient, its colors travel around the center rather than outward from it.

Color wheel

background: conic-gradient( #ff5252, #ffb347, #f9f871, #75e6a5, #75cfff, #a78bfa, #ff82c8, #ff5252 ); border-radius: 50%;

Graphic segments

background: conic-gradient( #c8ff3d 0deg 90deg, #75cfff 90deg 180deg, #ff82c8 180deg 270deg, #ff9c55 270deg 360deg ); border-radius: 50%;

Try it: Change the color stops or use from 45deg after conic-gradient( to rotate the starting point.

06 / Build Repeating Patterns

Repeating gradients produce stripes, rings, and textures. They’re particularly useful when you want a pattern without importing an image.

Diagonal stripes

background: repeating-linear-gradient( 135deg, #101b35 0px, #101b35 10px, #75cfff 10px, #75cfff 20px );

Concentric rings

background: repeating-radial-gradient( circle, #ff82c8 0px, #ff82c8 8px, #101b35 8px, #101b35 16px );

The key is the distance between the color stops. Smaller intervals create finer patterns; larger intervals create broader stripes and rings.

07 / Animate a Gradient

CSS gradients can also create motion. One practical technique is to make a background larger than its container and animate its position.

.animated-gradient { background: linear-gradient( 120deg, #101b35, #176b87, #8b5cf6, #ff82c8, #ff9c55 ); background-size: 300% 300%; animation: gradient-shift 8s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

Important: The animation works because the background is larger than the visible element. The keyframes move that oversized background back and forth.

Accessibility tip: Avoid rapid, flashing, or distracting motion. Keep important text readable against the background and respect users who prefer reduced motion. The lesson’s animated demonstration stops when the browser requests reduced motion.

08 / Guided Practice: Create a Gradient Poster

Now combine at least three techniques to make a graphic background for a fictional event, music release, creative studio, or digital exhibition.

Your design challenge

Create a container with a minimum height of 300px.
Choose a palette of three to five colors.
Combine a linear gradient with at least one radial gradient.
Add either a repeating pattern or a conic gradient.
Add a heading and a short line of supporting text.
Experiment with spacing, contrast, and typography until the composition feels intentional.

Here is a starting point. Add the HTML and CSS together in CodePen’s HTML panel.

<div class=”poster”> <p class=”eyebrow”>DIGITAL CULTURE / 2026</p> <h1>COLOR IN MOTION</h1> <p>An experiment in light, color, and code.</p> </div> <style> .poster { min-height: 300px; padding: 35px; display: flex; flex-direction: column; justify-content: center; color: white; border-radius: 12px; background: radial-gradient( circle at 85% 20%, #ff82c8, transparent 35% ), radial-gradient( circle at 15% 90%, #75cfff, transparent 40% ), linear-gradient( 135deg, #101b35, #263b60 ); } .poster h1 { max-width: 550px; font-size: clamp(30px, 6vw, 60px); line-height: 1; letter-spacing: -2px; } .poster .eyebrow { font-size: 11px; letter-spacing: 3px; font-weight: bold; } </style>

09 / Quick Reference

Technique	CSS function	Best for
Color stops	`linear-gradient()`	Controlled transitions
Layered glow	`radial-gradient()`	Depth and atmosphere
Color wheel	`conic-gradient()`	Circular graphics
Repeating pattern	`repeating-linear-gradient()`	Stripes and texture
Animated background	`@keyframes`	Motion and interaction

10 / Submission Checklist

Before submitting your work, make sure you have completed each item.

Created a new CodePen or a clearly labeled section in your existing pen.
Used at least three gradient techniques.
Experimented with color stops, direction, or positioning.
Created an intentional graphic composition with readable text.
Checked that your work displays at a narrow/mobile width.
Saved your pen and copied its shareable URL.