{"id":306104,"date":"2020-04-07T07:10:58","date_gmt":"2020-04-07T14:10:58","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&#038;p=306104"},"modified":"2021-09-10T12:15:17","modified_gmt":"2021-09-10T19:15:17","slug":"hard-stop-gradients","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/hard-stop-gradients\/","title":{"rendered":"Hard Stop Gradients"},"content":{"rendered":"\n<p>Here&#8217;s an example of &#8220;traditional&#8221; gradients where colors slowly fade from one to another.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1516\" height=\"1004\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?fit=1024%2C678&amp;ssl=1\" alt=\"\" class=\"wp-image-306153\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?w=1516&amp;ssl=1 1516w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?resize=1024%2C678&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?resize=768%2C509&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/gradient-sunset.png?resize=1000%2C662&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><figcaption>These are all <a href=\"https:\/\/codepen.io\/sedlukha\/pen\/JXrLKX\" rel=\"noopener\">created with CSS gradients<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>There is a concept called color-stops with gradients that allow you to control the position of where colors start transitioning from one to the next. Here&#8217;s an example where the first color hangs on for most of the way:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwPXNbX\" src=\"\/\/codepen.io\/anon\/embed\/RwPXNbX?height=220&amp;theme-id=1&amp;slug-hash=RwPXNbX&amp;default-tab=css,result\" height=\"220\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwPXNbX\" title=\"CodePen Embed RwPXNbX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripe {\n  height: 100px;\n  background: linear-gradient(to right, red 85%, blue);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?resize=1024%2C136&#038;ssl=1\" alt=\"\" class=\"wp-image-351709\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?resize=1024%2C136&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?resize=300%2C40&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?resize=768%2C102&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?resize=1000%2C133&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-1.png?w=1474&amp;ssl=1 1474w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<p>Here&#8217;s the trick: the color stops can get closer and closer to each other, and actually be at the <em>same point<\/em>. Meaning that instead of the color transitioning at all, one color stops and the other color can start at an exact point. Here&#8217;s a visual explanation of converging color stops:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNVXNRY\" src=\"\/\/codepen.io\/anon\/embed\/rNVXNRY?height=420&amp;theme-id=1&amp;slug-hash=rNVXNRY&amp;default-tab=result\" height=\"420\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNVXNRY\" title=\"CodePen Embed rNVXNRY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"442\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?resize=1024%2C442&#038;ssl=1\" alt=\"\" class=\"wp-image-351710\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?resize=1024%2C442&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?resize=300%2C130&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?resize=768%2C332&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?resize=1000%2C432&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-2.png?w=1450&amp;ssl=1 1450w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<p>The bottom example there almost looks like it&#8217;s two separate elements with two separate backgrounds, but nope, it&#8217;s a single element with hard-stop gradients splitting the space visually. If you needed to make vertical columns and handle their backgrounds all on one parent element, this is a possibility! In fact, because the background will cover the whole area, you don&#8217;t have to worry about the elements &#8220;stretching&#8221; the full height, which made this a great trick when we needed to make columns based on floats or inline-block elements. <\/p>\n\n\n\n<p>Extending the concept of hard stops, we can make a color-striped bar. Here are variations of it made by moving the <code>background-position<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLNmyYz\" src=\"\/\/codepen.io\/anon\/embed\/yLNmyYz?height=450&amp;theme-id=1&amp;slug-hash=yLNmyYz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLNmyYz\" title=\"CodePen Embed yLNmyYz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripe {\n  height: 15px;\n  background: linear-gradient(\n    to right, \n    red,\n    red 20%,\n    orange 20%,\n    orange 40%,\n    yellowgreen 40%,\n    yellowgreen 60%,\n    lightblue 60%,\n    lightblue 80%,\n    purple 80%,\n    purple\n  );\n  margin: 0 0 20px 0;\n}\n\n.stripe:nth-child(2) {\n  background-position-x: -10vw;\n}\n\n.stripe:nth-child(3) {\n  background-position-x: -20vw;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"117\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?resize=1024%2C117&#038;ssl=1\" alt=\"\" class=\"wp-image-351711\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?resize=1024%2C117&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?resize=300%2C34&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?resize=768%2C87&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?resize=1000%2C114&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-3.png?w=1476&amp;ssl=1 1476w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<p>Speaking of stripes, these hard-stop gradients are great for striped backgrounds of any kind. It gets a little easier with repeating gradients (e.g. <code>repeating-linear-gradient()<\/code>) as you don&#8217;t have to fill 100% of the space, you can use pixels and stop where you need to.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYNqmWK\" src=\"\/\/codepen.io\/anon\/embed\/eYNqmWK?height=770&amp;theme-id=1&amp;slug-hash=eYNqmWK&amp;default-tab=result\" height=\"770\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYNqmWK\" title=\"CodePen Embed eYNqmWK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-color: #ffd600;\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 9px,\n    #f4ff81 9px,\n    #f4ff81 10px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"398\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-4.png?resize=658%2C398&#038;ssl=1\" alt=\"\" class=\"wp-image-351712\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-4.png?w=658&amp;ssl=1 658w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-4.png?resize=300%2C181&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-color: #cfd8dc;\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 1px,\n    #90a4ae 1px,\n    #90a4ae 2px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"398\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-5.png?resize=656%2C398&#038;ssl=1\" alt=\"\" class=\"wp-image-351713\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-5.png?w=656&amp;ssl=1 656w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-5.png?resize=300%2C182&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-color: #e53935;\n  background-image: repeating-linear-gradient(\n    10deg,\n    transparent,\n    transparent 20px,\n    #c62828 20px,\n    #c62828 23px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"394\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/gradd-6.png?resize=734%2C394&#038;ssl=1\" alt=\"\" class=\"wp-image-351714\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/gradd-6.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/gradd-6.png?resize=300%2C161&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-color: #689f38;\n  background-image: repeating-linear-gradient(\n    -25deg,\n    transparent,\n    transparent 40px,\n    #aed581 40px,\n    #aed581 50px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"396\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-7.png?resize=728%2C396&#038;ssl=1\" alt=\"\" class=\"wp-image-351715\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-7.png?w=728&amp;ssl=1 728w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-7.png?resize=300%2C163&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-image: repeating-linear-gradient(\n      90deg,\n      rgba(224, 82, 67, 0.5) 0px,\n      rgba(224, 82, 67, 0.5) 40px,\n      transparent 40px,\n      transparent 80px\n    ),\n    repeating-linear-gradient(\n      0deg,\n      rgba(224, 82, 67, 0.5) 0px,\n      rgba(224, 82, 67, 0.5) 40px,\n      transparent 40px,\n      transparent 80px\n    ),\n    linear-gradient(90deg, hsl(250, 82%, 1%), hsl(250, 82%, 1%));\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"396\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-8.png?resize=656%2C396&#038;ssl=1\" alt=\"\" class=\"wp-image-351716\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-8.png?w=656&amp;ssl=1 656w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-8.png?resize=300%2C181&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-image: repeating-linear-gradient(\n      45deg,\n      hsla(312, 0%, 63%, 0.05) 0px,\n      hsla(312, 0%, 63%, 0.05) 10px,\n      transparent 10px,\n      transparent 100px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      hsla(312, 0%, 63%, 0.05) 0px,\n      hsla(312, 0%, 63%, 0.05) 50px,\n      transparent 50px,\n      transparent 100px\n    ),\n    linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"388\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-9.png?resize=650%2C388&#038;ssl=1\" alt=\"\" class=\"wp-image-351717\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-9.png?w=650&amp;ssl=1 650w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/grad-9.png?resize=300%2C179&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>There are other types of gradients as well! We can use hard-stops with <code>radial-gradient<\/code> and <code>repeating-linear-gradient<\/code> as well! <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poJMeBK\" src=\"\/\/codepen.io\/anon\/embed\/poJMeBK?height=565&amp;theme-id=1&amp;slug-hash=poJMeBK&amp;default-tab=result\" height=\"565\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poJMeBK\" title=\"CodePen Embed poJMeBK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background: repeating-radial-gradient(\n    circle at 100%,\n    #333,\n    #333 10px,\n    #999 10px,\n    #999 20px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"394\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-1.png?resize=656%2C394&#038;ssl=1\" alt=\"\" class=\"wp-image-351759\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-1.png?w=656&amp;ssl=1 656w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-1.png?resize=300%2C180&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-image: radial-gradient(#90caf9 20%, transparent 20%),\n    radial-gradient(#1e88e5 20%, transparent 20%);\n  background-color: #64b5f6;\n  background-position: top left, 50px 50px;\n  background-size: 100px 100px;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"396\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-2.png?resize=656%2C396&#038;ssl=1\" alt=\"\" class=\"wp-image-351760\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-2.png?w=656&amp;ssl=1 656w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-2.png?resize=300%2C181&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-10 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background-image: radial-gradient(\n    circle at top left,\n    #ec407a,\n    #ec407a 20%,\n    #7e57c2 20%,\n    #7e57c2 40%,\n    #42a5f5 40%,\n    #42a5f5 60%,\n    #26a69a 60%,\n    #26a69a 80%,\n    #9ccc65 80%\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"398\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-3.png?resize=656%2C398&#038;ssl=1\" alt=\"\" class=\"wp-image-351761\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-3.png?w=656&amp;ssl=1 656w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-3.png?resize=300%2C182&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-11 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.stripes {\n  background: repeating-radial-gradient(\n    circle at bottom right,\n    #eee,\n    #ccc 50px\n  );\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"396\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-4.png?resize=650%2C396&#038;ssl=1\" alt=\"\" class=\"wp-image-351762\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-4.png?w=650&amp;ssl=1 650w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/radgrad-4.png?resize=300%2C183&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>Notice in that last example, you still see some color fading stuff going on. A hard-stop gradient doesn&#8217;t have to be used exclusively. That one has just one hard stop that repeats.<\/p>\n\n\n\n<p>Conical gradients are another prime canidate for hard stop gradients, as when applied into a circle (e.g. <code>border-radius: 50%<\/code>) they become instant pie charts! <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abOeMVw\" src=\"\/\/codepen.io\/anon\/embed\/abOeMVw?height=400&amp;theme-id=1&amp;slug-hash=abOeMVw&amp;default-tab=css,result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abOeMVw\" title=\"CodePen Embed abOeMVw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-12 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.chart {\n  background: conic-gradient(\n    #f15854 4%,\n    #4d4d4d 0 8%,\n    #5da5da 0 17%,\n    #decf3f 0 48%,\n    #b276b2 0 54%,\n    #faa43a 0\n  );\n  border-radius: 50%;\n  height: 0;\n  padding-top: 100%;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"542\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pie-chart.png?resize=612%2C542&#038;ssl=1\" alt=\"\" class=\"wp-image-351764\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pie-chart.png?w=612&amp;ssl=1 612w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pie-chart.png?resize=300%2C266&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The word &#8220;gradient&#8221; implies a transition from one color to another color. That&#8217;s super useful in web design and can create lovely effects. We&#8217;re going to skip that whole &#8220;transition&#8221; part though and see what kind of CSS trickery that unlocks.<\/p>\n","protected":false},"featured_media":0,"parent":254473,"menu_order":13,"template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/306104"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/chapters"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/254473"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=306104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}