Photo by Khamkéo Vilaysing on Unsplash

CSSFilter,Backgrounds ,Shadows,overflows

Have you ever got yourself in situation like , you have to add some filtering in specific image , or blur any background , like apples does on their glass design ? or even apply some contrast to the current element or background?

so we have some great news to you , we can use css to all that jazz ,let's learn about the new css filter property and blur , contrast, brightness functions .

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions, such as blur() and contrast(), are available to help you achieve predefined effects.

below is quick example :

filter: url("https://unsplash.com/photos/woman-wearing-white-t-shirt-smiling-tNCH0sKSZbA?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash");
filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%);
filter: hue-rotate(90deg);
filter: drop-shadow(16px 16px 20px red) invert(75%);

you can use this playground to quick test the result

Static Starter - StackBlitz

more statements

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

Understanding each function at all

blur()

Applies a Gaussian blur to the input image.

filter: blur(5px);

brightness()

Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with 0% creating a completely black image, 100% having no effect, and values over 100% brightening the image.

filter: brightness(2);

contrast()

Adjusts the contrast of the input image. A value of 0% makes the image grey, 100% has no effect, and values over 100% create a contrast.

filter: contrast(200%);

drop-shadow()

Applies the parameter <shadow> as a drop shadow, following the contours of the image. The shadow syntax is similar to <box-shadow> with the exception that the inset keyword and spread parameter are not allowed. As with all filter property values, any filters after the drop-shadow() are applied to the shadow.

filter: drop-shadow(16px 16px 10px black);

grayscale()

Converts the image to grayscale. A value of 100% is completely grayscale. The initial value of 0% leaves the input unchanged. Values between 0% and 100% produce linear multipliers on the effect.

filter: grayscale(100%);

hue-rotate()

Applies a hue rotation. The <angle> value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of 0deg leaves the input unchanged.

filter: hue-rotate(90deg);

invert()

Inverts the samples in the input image. A value of 100% completely inverts the image. A value of 0% leaves the input unchanged. Values between 0% and 100% have linear multipliers on the effect.

filter: invert(100%);

opacity()

Applies transparency. 0% makes the image completely transparent and 100% leaves the image unchanged.

filter: opacity(50%);

saturate()

Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.

filter: saturate(200%);

sepia()

Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.

filter: sepia(100%);

Combining functions

You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared. The following example enhances the contrast and brightness of the image:

filter: contrast(175%) brightness(103%);
img {
  border: 5px solid yellow;
}
/* Gray the second image by 40% and blur by 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
#logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}