A linear gradient is a CSS-generated image whose colors transition along a straight line between color stops. The linear-gradient() function accepts a direction followed by color-and-percentage pairs. section 3.6.2
Build a gradient by choosing:
- A direction, such as to right, which determines the transition angle. section 3.6.2
- A starting and ending color, such as #128688 and #4db3ff. section 3.6.2
- Optional percentages that place each color stop along the gradient. section 3.6.2
- A background or border-image property, because a gradient behaves as an image rather than a border color. section 6.3 section 10.3.1
Theme a progress bar
Apply background: linear-gradient(to right, #128688 0%, #4db3ff 100%) to a progress-bar container. The result fades from dark green on the left to light blue on the right, matching the surrounding visual theme. section 3.6.2
Create a full-height page background
Use a gradient as the page background, then set html and body to margin: 0, padding: 0, and min-height: 100vh. The background reaches the viewport edges while remaining able to expand with longer content. section 6.3
Listing 3.18 Styling the progress indicator container in Chrome
::-webkit-progress-bar {
border-radius: 20px;
background: #4db3ff; #1
background: linear-gradient(to right, #128688 0%,#4db3ff 100%);
}
::-webkit-progress-inner-element {
border-radius: 20px;
}
Inspect a complete gradient declaration applied to a rounded progress-bar container, including a solid background fallback. section 3.6.2
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
Inspect a gradient border effect using border-image, with a solid border declaration retained as a fallback. section 10.3.1
