From a053451407681f4bc8d5818762d1b37cc4f65a27 Mon Sep 17 00:00:00 2001
From: Codex <242516109+Codex@users.noreply.github.com>
Date: Sun, 15 Mar 2026 19:19:09 +0000
Subject: [PATCH] Deduplicate content from CSS gradient color hint guidance
Combine guidance and remove the second one.
Co-authored-by: openai-code-agent[bot] <242516109+Codex@users.noreply.github.com>
Co-authored-by: Mozi <29089388+pzhlkj6612@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
.../guides/images/using_gradients/index.md | 32 +------------------
1 file changed, 1 insertion(+), 31 deletions(-)
diff --git a/files/en-us/web/css/guides/images/using_gradients/index.md b/files/en-us/web/css/guides/images/using_gradients/index.md
index dae1ef8e27f80dc..90d3e8058efd783 100644
--- a/files/en-us/web/css/guides/images/using_gradients/index.md
+++ b/files/en-us/web/css/guides/images/using_gradients/index.md
@@ -187,7 +187,7 @@ div {
### Gradient hints
-By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.
+By default, a gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient, letting you control the {{Glossary("interpolation")}}, or progression, between two color stops. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark. To highlight the difference the color hint can make, the second example does not contain the hint:
```html hidden
@@ -280,36 +280,6 @@ In the second example, the second color stop for each color is at the same locat
In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.
-### Controlling the progression of a gradient
-
-By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the {{Glossary("interpolation")}}, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:
-
-```html hidden
-
-
-```
-
-```css hidden
-div {
- width: 120px;
- height: 120px;
- float: left;
- margin-right: 10px;
- box-sizing: border-box;
-}
-```
-
-```css
-.color-hint-gradient {
- background: linear-gradient(to top, lime, 20%, cyan);
-}
-.regular-progression {
- background: linear-gradient(to top, lime, cyan);
-}
-```
-
-{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}
-
### Overlaying gradients
Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.