.gradient-example{height:4rem;box-sizing:border-box}#simple-gradient{background-image:-webkit-linear-gradient(0deg,#ff0,red);background-image:linear-gradient(90deg,#ff0,red)}#rgb-gradient{background-image:-webkit-linear-gradient(0deg,#ff0,#00f);background-image:linear-gradient(90deg,#ff0,#00f)}#hsl-gradient{background:-webkit-linear-gradient(0deg,#ff0,#80ff00,#0f0,#00ff80,#0ff,#007fff,#00f);background:linear-gradient(90deg,#ff0,#80ff00,#0f0,#00ff80,#0ff,#007fff,#00f)}#husl-gradient{background:-webkit-linear-gradient(0deg,#ff0,#8df100,#00d48a,#00b09f,#008f9b,#006d97,#00f);background:linear-gradient(90deg,#ff0,#8df100,#00d48a,#00b09f,#008f9b,#006d97,#00f)}.summary>.gradient-example{padding:.5rem 1rem}.summary>.gradient-example::before{content:attr(id);color:rgba(0,0,0,.5)}