Skip to content
CSS Wolf
  • CSS
  • Vue
  • Tips and tricks
  • All Posts

lighten

How to Lighten or Darken a Color with Pure CSS

November 11, 2024November 10, 2023 by Gauri Shanker
Lighten or darken a color in pure CSS without using SASS/SCSS or any other external preprocessor

Lightening or darkening a color is a common use case in UI design. You may want to darken the background color when a user hovers over a button, or you may use a slightly lighter shade of the text color for the background of an alert. In this article, we will start with the usual … Read more

Categories CSS Tags darken, hsl, lighten 1 Comment
Hi, I’m Gauri Shanker, the face behind this blog. After 15 years on Windows, I finally made the leap to Mac and fell for it hard. I dove deep into the ins and outs of macOS—from Reddit threads to YouTube deep dives—and now I share what I’ve learned to help other Mac converts make the most of their switch.

Alongside Mac tips, I also love coding and sharing my favorite hacks and solutions. If you’re into tech, tips, and coding, welcome! You'll love it here.
  • Rectangle vs Raycast: Best Window Management App for Mac
  • How to Use YouTube Without a Mouse
  • How to Read the Business Insider Prime Articles for FREE
  • How to Use a Browser Without a Mouse on Windows and Mac
  • How to Change the Appearance of Any Website

About

I am Gauri Shanker, a coding enthusiast. I learn new things almost every day and share them through this blog.

Articles on this blog may contain some affiliate links. It means if you buy something from these links, I may get a commission at no extra cost to you.

Follow me on Twitter and Pinterest.

Popular Posts

  • Rectangle vs Raycast: Best Window Management App for Mac
  • How to Use YouTube Without a Mouse
  • How to Read the Business Insider Prime Articles for FREE
  • How to Use a Browser Without a Mouse on Windows and Mac
  • How to Change the Appearance of Any Website
© 2025 CSS Wolf • Built with GeneratePress