New pages: stop-opacity and stop-color properties (#35170)

* New page: stop-opacity property * remove redirect * New page: CSS stop-color property * New page: CSS stop-color property * example details * edits per review * edits per review * Update files/en-us/web/css/stop-color/index.md Co-authored-by: Chris Mills <[email protected]> * Update files/en-us/web/css/stop-opacity/index.md --------- Co-authored-by: Brian Thomas Smith <[email protected]> Co-authored-by: Chris Mills <[email protected]>
mdn · Aug 8, 2024 · 8ad43cb · 8ad43cb
1 parent 6ae8ff6
commit 8ad43cb
Show file tree

Hide file tree

Showing 3 changed files with 308 additions and 2 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -11709,8 +11709,6 @@
 /en-US/docs/Web/CSS/single-transition-timing-function	/en-US/docs/Web/CSS/easing-function
 /en-US/docs/Web/CSS/speak-as	/en-US/docs/Web/CSS/@counter-style/speak-as
 /en-US/docs/Web/CSS/static	/en-US/docs/Web/CSS/position
-/en-US/docs/Web/CSS/stop-color	/en-US/docs/Web/SVG/Attribute/stop-color
-/en-US/docs/Web/CSS/stop-opacity	/en-US/docs/Web/SVG/Attribute/stop-opacity
 /en-US/docs/Web/CSS/stroke	/en-US/docs/Web/SVG/Attribute/stroke
 /en-US/docs/Web/CSS/stroke-dasharray	/en-US/docs/Web/SVG/Attribute/stroke-dasharray
 /en-US/docs/Web/CSS/stroke-dashoffset	/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md
@@ -0,0 +1,146 @@
+---
+title: stop-color
+slug: Web/CSS/stop-color
+page-type: css-property
+browser-compat: css.properties.stop-color
+---
+
+{{CSSRef}}
+
+The **`stop-color`** [CSS](/en-US/docs/Web/CSS) property defines the color to use for an SVG {{SVGElement("stop")}} element within a gradient. If present, it overrides the element's {{SVGAttr("stop-color")}} attribute.
+
+> [!NOTE]
+> The `stop-color` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.
+
+## Syntax
+
+```css
+/* <color> values */
+stop-color: red;
+stop-color: hsl(120deg 75% 25% / 60%);
+stop-color: currentcolor;
+
+/* Global values */
+stop-color: inherit;
+stop-color: initial;
+stop-color: revert;
+stop-color: revert-layer;
+stop-color: unset;
+```
+
+### Values
+
+- {{cssxref("color_value", "&lt;color>")}}
+
+  - : The color of the fill. This can be any valid CSS {{cssxref("color_value", "&lt;color>")}} value.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Defining the color stops of SVG gradients
+
+This example demonstrates the basic use case of `stop-color`, and how the CSS `stop-color` property takes precedence over the `stop-color` attribute.
+
+#### HTML
+
+We have an SVG with three {{SVGElement("rect")}} squares and three {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value.
+
+```html
+<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="myGradient1">
+      <stop offset="25%" stop-color="#000" />
+      <stop offset="40%" stop-color="#fff" />
+      <stop offset="60%" stop-color="#fff" />
+      <stop offset="75%" stop-color="#333" />
+    </linearGradient>
+    <linearGradient id="myGradient2">
+      <stop offset="25%" stop-color="#000" />
+      <stop offset="40%" stop-color="#fff" />
+      <stop offset="60%" stop-color="#fff" />
+      <stop offset="75%" stop-color="#333" />
+    </linearGradient>
+    <linearGradient id="myGradient3">
+      <stop offset="25%" stop-color="#000" />
+      <stop offset="40%" stop-color="#fff" />
+      <stop offset="60%" stop-color="#fff" />
+      <stop offset="75%" stop-color="#333" />
+    </linearGradient>
+  </defs>
+  <rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
+  <rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
+  <rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
+</svg>
+```
+
+#### CSS
+
+We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the first and last stops in each gradient, overriding their `stop-color` attribute values, using the `stop-color` property. Various CSS {{cssxref("color_value", "&lt;color>")}} syntaxes are shown.
+
+```css hidden
+svg {
+  border: 1px solid;
+  height: calc(100vh - 20px);
+  margin-bottom: 10px;
+}
+```
+
+```css
+rect {
+  stroke: #333;
+  stroke-width: 1px;
+}
+
+#myGradient1 {
+  stop:first-of-type {
+    stop-color: #66ccff;
+  }
+  stop:last-of-type {
+    stop-color: #f4aab9;
+  }
+}
+#myGradient2 {
+  stop:first-of-type {
+    stop-color: yellow;
+  }
+  stop:last-of-type {
+    stop-color: purple;
+  }
+}
+#myGradient3 {
+  stop:first-of-type {
+    stop-color: hsl(0deg 100% 50%);
+  }
+  stop:last-of-type {
+    stop-color: hsl(20deg 100% 50%);
+  }
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Defining the color stops of SVG gradients", "300", "200")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("stop-color")}} attribute
+- Presentation properties: `stop-color`, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("fill")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}}
+- {{cssxref("opacity")}}
+- {{cssxref("background-color")}}
+- {{cssxref("color_value", "&lt;color>")}}
+- {{cssxref("basic-shape")}} data type
diff --git a/files/en-us/web/css/stop-opacity/index.md b/files/en-us/web/css/stop-opacity/index.md
@@ -0,0 +1,162 @@
+---
+title: stop-opacity
+slug: Web/CSS/stop-opacity
+page-type: css-property
+browser-compat: css.properties.stop-opacity
+---
+
+{{CSSRef}}
+
+The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property defines the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element within an SVG gradient. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute.
+
+The property value impacts the {{cssxref("stop-color")}}'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `stop-color` property more opaque.
+
+> [!NOTE]
+> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.
+
+## Syntax
+
+```css
+/* numeric and percentage values */
+stop-opacity: 0.2;
+stop-opacity: 20%;
+
+/* Global values */
+stop-opacity: inherit;
+stop-opacity: initial;
+stop-opacity: revert;
+stop-opacity: revert-layer;
+stop-opacity: unset;
+```
+
+### Values
+
+The `<opacity-value>` is a {{cssxref("number")}} or {{cssxref("percentage")}} denoting the opacity of the SVG gradient `<stop>` element.
+
+- {{cssxref("number")}}
+
+  - : A numeric value between `0` and `1`, inclusive.
+
+- {{cssxref("percentage")}}
+
+  - : A percentage value between `0%` and `100%`, inclusive.
+
+With `0` or `0%` set, the stop is fully transparent. With `1` or `100%` set, the element is the full opacity of the `stop-color` value, which may or may not be partially opaque.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Defining the opacity of a SVG gradient color stop
+
+This example demonstrates the basic use case of `stop-opacity`, and how the CSS `stop-opacity` property takes precedence over the `stop-opacity` attribute.
+
+#### HTML
+
+We have an SVG with a few {{SVGElement("polygon")}} stars and three {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value.
+
+```html
+<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="myGradient1">
+      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
+      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
+      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
+    </linearGradient>
+    <linearGradient id="myGradient2">
+      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
+      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
+      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
+    </linearGradient>
+    <linearGradient id="myGradient3">
+      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
+      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
+      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
+    </linearGradient>
+  </defs>
+  <polygon points="40,10 10,100 80,40 0,40 70,100" />
+  <polygon points="125,10 95,100 165,40 85,40 155,100" />
+  <polygon points="210,10 180,100 250,40 170,40 240,100" />
+</svg>
+```
+
+#### CSS
+
+We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} making the polygon path line visible.
+
+Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's `id` is the `url()` parameter. We set `magenta` as the fallback color.
+
+We define the opacity of the stops of each gradient using the `stop-opacity` property.
+
+The SVG has a striped background to make the transparency settings more apparent.
+
+```css hidden
+svg {
+  border: 1px solid;
+  height: calc(100vh - 20px);
+  margin-bottom: 10px;
+  background: repeating-linear-gradient(
+    to top left,
+    white 0 9px,
+    black 9px 10px
+  );
+}
+```
+
+```css
+polygon {
+  stroke: #333;
+  stroke-width: 1px;
+}
+polygon:nth-of-type(1) {
+  fill: url("#myGradient1") magenta;
+}
+polygon:nth-of-type(2) {
+  fill: url("#myGradient2") magenta;
+}
+polygon:nth-of-type(3) {
+  fill: url("#myGradient3") magenta;
+}
+
+#myGradient1 stop {
+  stop-opacity: 1;
+}
+#myGradient2 stop {
+  stop-opacity: 0.8;
+}
+#myGradient3 stop {
+  stop-opacity: 25%;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Defining the opacity of a SVG gradient color stop", "300", "200")}}
+
+The first star is fully opaque. The fill of the second star is 80% opaque because the color stops are slightly translucent; the `stop-opacity: 0.8;` overrode the `stop-opacity="1"` element attribute value. The fill of the last star is barely noticeable with color stops that are 25% opaque. Note the stroke is the same opaque dark grey in all cases.
+
+> [!NOTE]
+> Because we used the same `stop-opacity` value for all the sibling `<stop>` elements in the linear gradient, we could have instead used a single `<linearGradient>` with fully opaque stops, and set a value for each `<polygon>`s {{cssxref("fill-opacity")}} property instead.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("stop-opacity")}} attribute
+- Presentation properties: `stop-opacity`, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("fill")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-color")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}}
+- {{cssxref("opacity")}}
+- {{cssxref("background-color")}}
+- {{cssxref("color_value", "&lt;color>")}}
+- {{cssxref("basic-shape")}} data type