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 Saturate

The CSS filter property's saturate() function adjusts the color intensity of an element. A value of 100% or 1 represents the original image, while a value of 0% or 0 will make the image completely grayscale. Values above 100% will increase the color saturation, making them appear more vivid.

Example 1: Basic Saturation

This example shows how to increase the saturation of an image, making the colors appear much richer and more vibrant than the original.

.saturated-image {
  /* Increases the color saturation by 80% from the original */
  filter: saturate(180%);
}

Explanation The .saturated-image class is assigned to an image element. The filter property with the saturate() function is used to increase the color intensity of the image to 180%.

Example 2: Desaturation (Grayscale)

Here, we will completely remove all color from the image, rendering it in grayscale by setting the saturation to zero.

.desaturated-image {
  /* Removes all color, resulting in a grayscale image */
  filter: saturate(0%);
}

Explanation The .desaturated-image class uses the saturate() function with a value of 0%. This removes all color information from the image, effectively turning it into a black and white or grayscale image.

Example 3: Subtle Saturation Boost

This demonstrates a more subtle enhancement, where the color saturation is only slightly increased to make the image pop without looking unnatural.

.subtle-boost {
  /* A gentle 20% boost in color saturation */
  filter: saturate(1.2);
}

Explanation In this case, the .subtle-boost class applies a saturation level of 1.2. This is equivalent to 120% and provides a minor but noticeable increase in color vibrancy.

Example 4: Saturation on Hover

This example applies a saturation effect when a user hovers their mouse over the image, providing a simple interactive visual feedback.

.hover-saturate {
  /* Set initial state to be partially desaturated */
  filter: saturate(50%);
  transition: filter 0.3s ease-in-out;
}

.hover-saturate:hover {
  /* Return to full color on hover */
  filter: saturate(100%);
}

Explanation The image with the .hover-saturate class is initially displayed at 50% saturation. When hovered over, the saturation smoothly transitions to 100% over 0.3 seconds, creating an engaging effect.

Example 5: Using saturate() with other filters

The saturate() function can be combined with other filter functions to create more complex and unique visual effects on an element.

.multi-filter {
  /* Apply multiple filters for a unique look */
  filter: saturate(200%) contrast(120%);
}

Explanation For the .multi-filter class, we are chaining two filter functions. The browser first applies saturate(200%) to make the colors hyper-vibrant and then increases the contrast by 120%.

Example 6: Animated Saturation with Keyframes

You can use CSS animations to create a pulsating color effect by animating the saturate() value over time.

.animated-saturation {
  animation: pulse-color 2s infinite alternate;
}

@keyframes pulse-color {
  from {
    filter: saturate(25%);
  }
  to {
    filter: saturate(175%);
  }
}

Explanation The .animated-saturation class applies an animation named pulse-color. This animation cycles the saturation of the element from 25% to 175% and back again infinitely, creating a pulsing color effect.

Example 7: Saturating a Video Element

The saturate() filter is not limited to images and can be applied to other HTML elements, such as videos, to adjust their color intensity.

.saturated-video {
  /* Make the video colors extremely vivid */
  filter: saturate(2.5);
}

Explanation This code applies the saturate() filter to a video element with the class .saturated-video. The value of 2.5 (or 250%) will make the colors in the playing video appear much more intense.