Chakra-UI

I♥️Components

Filter

|

Chakra Docs

|

⦾ Chakra UI does not provide built-in features specifically for image filtering. However, you can apply image filters by leveraging CSS and Chakra UI's system for handling styles. Note: To apply blur, brightness, contrast, hueRotate, invert, saturate props on the element, set filter prop value to "auto".

CSS filters allow you to visually manipulate an element by changing pixels' colors, blurring, brightening, or darkening images, among other effects. Here are the commonly used filter functions:

  • blur(): Applies a Gaussian blur to the image. The parameter is the radius of the blur.
  • brightness(): Adjusts the brightness of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
  • contrast(): Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
  • grayscale(): Converts the input image to grayscale. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged.
  • hue-rotate(): Applies a hue rotation on the image. The value defines the number of degrees around the color circle the input samples will be adjusted.
  • invert(): Inverts the samples in the input image.
  • opacity(): Applies transparency to the input image. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
  • saturate(): Saturates the input image. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
  • sepia(): Converts the input image to sepia. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.

Remember, the ease of using CSS with Chakra UI's style props allows you to create and customize as many filter effects as you need. You can create reusable components with these effects to make your development process smoother and your user interface more engaging.


Here is how you can apply these CSS filters to an image using Chakra UI:

Examples

Filtered Images

Filtered Images as Backdrops

🚨 backdrop-filter is not compatible with Firefox. Although users have the option to enable it, it is advisable to create a component that appears visually appealing both with and without utilizing this property.

Box with Backdrop Filter
Box with Backdrop Blur
Box with Backdrop Contrast

Did you know?

Creative Idea No. 1

Interactive Hover Effect: you know that you can create interactive hover effects using CSS filters with Chakra UI. Here's an example of how you could make an image grayscale by default and then revert it to full color when a user hovers over it.

Code

Creative Idea No. 2

Combining Multiple Filters: you can combine multiple filters to achieve unique effects. For example, you can create a dreamy, vintage effect by combining blur, sepia, and contrast

Code

Creative Idea No. 3

Animating Filters: you can animate filter effects using CSS transitions and keyframes. This can be used to create engaging effects such as a pulsating brightness effect. In following example, the brightness of the image will increase to 150% halfway through the animation, then return to 100% by the end of the animation. The animation will repeat indefinitely due to the infinite keyword. The duration of the animation is set to 3 seconds with the 3s value.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.