🔄 CSS Tutorial: invert()

📌 Introduction

The invert() function in CSS is part of the filter property and is used to invert the colors of an element. It creates a photographic negative-like effect by swapping lightness values — light becomes dark, dark becomes light, and colors flip to their opposites. 🎨✨ This is especially useful for dark mode effects, image manipulation, hover animations, and UI accessibility testing.

🎯 What Does invert() Do?

  • Inverts all colors inside the element
  • Works on images, videos, backgrounds, and entire elements
  • Accepts a percentage or decimal value (0 → 1)
  • Common in dark mode toggles and creative UIs

✨ Syntax

Syntax — invert()

selector {
  filter: invert(<percentage> | <number>);
}

Note

invert(1) = 100% inversion
invert(0) = no change

🧩 Accepted Values

1. Percentage

Code Snippet

filter: invert(50%);

2. Decimal Number (0 → 1)

Code Snippet

filter: invert(0.7);

3. Full Inversion

Code Snippet

filter: invert(1); /* Complete color flip */

4. No Inversion

Code Snippet

filter: invert(0);

🔥 Practical Examples

1. Invert Image Colors

Invert Image

img {
  filter: invert(1);
}

2. Subtle Dark Mode Effect (Invert + Other Filters)

Dark Mode

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

3. Hover to Invert Colors

Hover Effect

.hover-invert:hover {
  filter: invert(100%);
}

4. Invert Only Background of an Icon

Icon Background

.icon {
  background: #000;
  filter: invert(1);
}

5. Invert a Whole UI Section

Section Example

.section {
  filter: invert(1);
  padding: 20px;
}

📊 Before/After Table

ValueEffect
invert(0)No change
invert(0.5)Half-inverted colors
invert(1)Fully inverted colors

🧠 Tips & Use Cases

  • Combine with brightness() and hue-rotate() for dark mode
  • Use invert(1) to toggle icons from black → white dynamically
  • Great for glitch, neon, and negative-film effects
  • Avoid inverting text-heavy areas without contrast testing
>>“Invert adds instant contrast and drama — perfect for dark mode and bold UI effects.” ✨

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x240/eeeeee/000000&text=invert()+demo

🎉 Conclusion

The invert() function is a simple yet powerful CSS filter that flips colors and adds striking visual effects. Whether you're building dark mode toggles, image-based UIs, or creative hover effects, invert() helps deliver bold, experimental, and accessible designs. 🚀