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 Filter Brightness

The CSS filter property applies graphical effects like blurring or color shifting to an element. The brightness() function adjusts the brightness of the image or element, making it appear lighter or darker. A value of 0% will create an image that is completely black, while a value of 100% leaves the image unchanged. Values over 100% will make the image brighter.

Example 1: Making an Image Brighter

/* This CSS rule targets the image with the class 'brighten-me' */
.brighten-me {
  /* The filter property is used to apply the brightness effect. */
  /* A value of 1.5 or 150% makes the image 50% brighter than its original state. */
  filter: brightness(1.5);
}

Explanation:

This code selects an element with the class .brighten-me and applies a brightness() filter. The value of 1.5 increases the brightness of the element by 50%, making it appear significantly lighter.

Example 2: Making an Image Darker

/* This rule targets an image with the class 'dim-the-lights' */
.dim-the-lights {
  /* Applying a brightness value less than 1 or 100% will darken the image. */
  /* Here, 0.6 or 60% makes the image 40% darker. */
  filter: brightness(0.6);
}

Explanation:

This example targets the .dim-the-lights class. The brightness(0.6) filter reduces the element's brightness to 60% of its original value, resulting in a noticeably darker, dimmed appearance.

Example 3: Default Brightness

/* This class 'normal-image' will have its brightness unchanged. */
.normal-image {
  /* A brightness value of 1 or 100% represents the original brightness of the element. */
  /* This is the default value for the brightness function. */
  filter: brightness(1);
}

Explanation:

The .normal-image class uses brightness(1), which is equivalent to 100%. This value represents the original, unaltered brightness of the element, so visually, no change occurs.

Example 4: Completely Black Element

/* This rule applies to the element with the class 'black-out' */
.black-out {
  /* A brightness value of 0 or 0% will render the element completely black. */
  /* All color information is removed, leaving only black. */
  filter: brightness(0);
}

Explanation:

Here, the .black-out class has its brightness set to 0. This effectively removes all light from the element, rendering it as a completely black shape, losing all its original colors and details.

Example 5: Using Percentage Values

/* This CSS targets the 'brighter-image-percent' class */
.brighter-image-percent {
  /* The brightness function also accepts percentage values. */
  /* 200% will make the image twice as bright as the original. */
  filter: brightness(200%);
}

Explanation:

This code demonstrates using a percentage value. brightness(200%) is applied to the .brighter-image-percent class, doubling its brightness compared to the original state. This is an alternative syntax to using decimal values like 2.

Example 6: Brightness on Hover

/* This rule targets an element with the class 'hover-effect' */
.hover-effect {
  /* Initially, the element has its default brightness. */
  filter: brightness(1);
  /* A smooth transition is added for the filter property. */
  transition: filter 0.3s ease-in-out;
}

/* This rule applies when the user hovers over the element. */
.hover-effect:hover {
  /* On hover, the brightness is increased to 120%. */
  filter: brightness(1.2);
}

Explanation:

This example creates an interactive effect. The .hover-effect element starts at normal brightness. When a user hovers over it, the brightness increases to 1.2 (120%), creating a subtle highlighting effect. The transition property ensures this change happens smoothly.

Example 7: Combining Brightness with Other Filters

/* This rule is for an element with the class 'combo-filter' */
.combo-filter {
  /* Multiple filter functions can be chained together, separated by a space. */
  /* Here, we increase brightness by 110% and also apply a sepia effect. */
  filter: brightness(1.1) sepia(0.8);
}

Explanation:

This demonstrates the power of combining multiple filter functions. The .combo-filter class gets both a brightness enhancement to 1.1 (110%) and a sepia tone. This allows for creating more complex and layered visual effects on a single element.