Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

CSS Invert

The CSS filter property applies graphical effects like blurring or color shifting to an element. The invert() function inverts the colors on the element. A value of 1 (or 100%) represents a full inversion, while 0 (or 0%) leaves the element unchanged.

Example 1: Full Inversion on an Image

/* style.css */
.inverting-image {
  /* This applies a 100% color inversion to the image. */
  filter: invert(100%);
}

Explanation

This code selects an element with the class .inverting-image and applies a complete color inversion. Black becomes white, white becomes black, and all other colors are converted to their opposite on the color wheel.

Example 2: Partial Inversion

/* style.css */
.partially-inverted {
  /* Inverts the colors of the element by 75%. */
  filter: invert(75%);
}

Explanation

Here, the invert() function is set to 75%, creating a partial color inversion. The effect is less stark than a full 100% inversion, resulting in muted, shifted colors.

Example 3: Inversion on Hover

/* style.css */
.hover-invert-effect {
  /* A smooth transition is applied for the filter property. */
  transition: filter 0.5s ease-in-out;
}

.hover-invert-effect:hover {
  /* Inverts the element's colors only when the mouse pointer is over it. */
  filter: invert(1);
}

Explanation

This example creates an interactive effect where the element's colors fully invert when a user hovers over it. The transition property ensures the change is gradual and not instantaneous.

Example 4: Inverting a Div with Text

/* style.css */
.inverted-text-block {
  background-color: #f0f0f0;
  color: #333;
  padding: 20px;
  /* Applying a full inversion to the entire div. */
  filter: invert(1);
}

Explanation

This CSS rule applies the invert() filter to a div. Consequently, the light gray background becomes dark, and the dark text becomes light, demonstrating how invert() affects all aspects of an element.

Example 5: Using Decimal Values for Inversion

/* style.css */
.subtle-inversion {
  /* This applies a subtle 20% inversion effect using a decimal value. */
  filter: invert(0.2);
}

Explanation

The invert() function accepts decimal values between 0 and 1. In this case, 0.2 is equivalent to 20%, providing a very slight color inversion for a subtle design touch.

Example 6: Combining Invert with Other Filters

/* style.css */
.multi-filter-image {
  /* This first inverts the image and then applies a sepia tone. */
  filter: invert(1) sepia(1);
}

Explanation

You can chain multiple filter functions together. This code first inverts the colors of the element and then applies a full sepia effect, creating a unique, stylized look.

Example 7: Inversion on an Active Link

/* style.css */
a.active-invert-link {
  color: blue;
  transition: filter 0.3s;
}

a.active-invert-link:active {
  /* The link's color inverts for a moment when it is clicked. */
  filter: invert(100%);
}

Explanation

This CSS provides user feedback by inverting the link's color when it is being clicked (the :active state). It's a simple way to show that the click has been registered by the browser.