Change the color of a webpage dynamically using JS and CSS
New Courses Coming Soon
Join the waiting lists
Here’s how to dynamically change a web page’s colors using the CSS filter property and JavaScript:
<a href='javascript:document.querySelector("html").setAttribute("style","filter: saturate(60%) brightness(80%);")'>
pastel
</a>
<a href='javascript:document.querySelector("html").setAttribute("style","filter: grayscale(100%); ")'>
grayscale
</a>
<a href='javascript:document.querySelector("html").setAttribute("style","filter: ")'>
normal
</a>
→ Get my JavaScript Beginner's Handbook
→ Read my
JavaScript Tutorials
on The Valley of Code
→ Read my
TypeScript Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X