This is the all-in-one demo of CSS custom properties. It does not include any comments or detail beyond the HTML and CSS on this page. If you're looking for that, please see the associated article.
If you want to set the colors back, just refresh the page.
text on a gradientSome generic text follows, to give some content to this page to style.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat, arcu vel convallis laoreet, dui tortor tincidunt velit, quis volutpat nunc nisl in ante. Mauris sed imperdiet arcu. Donec aliquet ac felis in lacinia. Donec vel tempus purus. Cras a vestibulum odio. Nulla interdum vestibulum magna quis convallis. Phasellus malesuada, felis et vehicula scelerisque, nisi nulla gravida enim, varius ornare eros purus porta lacus. In pharetra et lacus non euismod. Aliquam tincidunt mi ut mi lobortis, vitae consequat diam semper. Donec odio lorem, vestibulum eu leo et, mattis vehicula mi. In dignissim blandit purus, et condimentum arcu interdum id. Aliquam id euismod turpis. Etiam dui enim, vulputate nec nulla ac, egestas egestas diam. Praesent molestie dui et velit iaculis, gravida placerat diam aliquet. Suspendisse potenti. Donec luctus quam ac orci eleifend rutrum.
Vestibulum venenatis urna sed lorem imperdiet accumsan. Aenean a aliquet mauris, a feugiat nisi. Fusce dignissim eros at turpis interdum pretium. Aenean eu orci eleifend, venenatis est et, tristique dolor. Aliquam egestas mi nec lorem sollicitudin, nec rutrum dui ultrices. Sed justo erat, semper in ultricies non, varius ut ligula. In et lobortis quam. Phasellus aliquet turpis non interdum luctus. Fusce ullamcorper tempus eros.
Phasellus ut augue laoreet, pretium arcu vel, maximus mauris. Nulla ut dui a leo rutrum convallis eu sit amet ipsum. Nullam quis diam eu magna pharetra volutpat in quis eros. In hac habitasse platea dictumst. Mauris porttitor quam a urna tempus pellentesque. Nunc vehicula vulputate ipsum, nec fermentum tellus. Praesent ultrices ultricies neque sed convallis. Nunc blandit fringilla mi, at hendrerit turpis luctus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor turpis a erat commodo, at faucibus eros commodo. Nam orci mi, feugiat vel erat sed, elementum accumsan metus. Sed ullamcorper molestie semper. Maecenas a ligula quam. Vivamus rutrum nulla a nisl ornare rutrum non eu enim. Aenean dictum ultrices nisl eu dignissim.