BCD tables only load in the browser
filter
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.
Try it
/* 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); /* Use no filter */ filter: none; /* Global values */ filter: inherit; filter: initial; filter: revert; filter: revert-layer; filter: unset;
With a function, use the following:
filter: []* | none;
You can use url() to reference an SVG filter element. For a reference to an SVG element, use the following syntax:
filter: url(file.svg#filter-element-id);
Functions
The filter property is specified as none or one or more of the functions listed below. If the parameter for any function is invalid, the function returns none . Except where noted, the functions that take a value expressed with a percent sign (as in 34% ) also accept the value expressed as decimal (as in 0.34 ).
When the filter property values contains multiple functions, the filters are applied in order.
Applies a Gaussian blur to the input image.
filter: blur(5px);
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);
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%);
Applies the parameter as a drop shadow, following the contours of the image. The shadow syntax is similar to (defined in the CSS backgrounds and borders module), 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);
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%);
Applies a hue rotation. The 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);
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%);
Applies transparency. 0% makes the image completely transparent and 100% leaves the image unchanged.
filter: opacity(50%);
Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.
filter: saturate(200%);
Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.
filter: sepia(100%);
backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.
/* Keyword value */ backdrop-filter: none; /* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: revert-layer; backdrop-filter: unset;
Values
No filter is applied to the backdrop.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a filter function list |
backdrop-filter =
none |
=
[ | ]+
=
|
|
|
|
|
|
|
|
|
=
url( * ) |
src( * )
Convert a color image to black and white
Find help in the app
Use the Discover Panel to find answers, access tutorials, and learn more about converting to black and white.
Color photography is indispensable when colors and shades, or hues, in your image are distinctive and vivid, allowing you to see even the most intricate details. Black and white photography is the better option when you want to focus on the subject and the textures in an image without being distracted by colors. Black and white effects can help bring out the drama in your images.
To easily convert a color image to black and white with the Black & White adjustment layer in Photoshop, follow the quick steps below:
Convert your image to black and white with the Black & White adjustment layer
To access the Black & White adjustment layer, do one of the following:
- Select Window > Adjustments . Click the Black & White icon () in the Adjustments panel that opens.
- Choose Layer > New Adjustment Layer > Black & White . In the New Layer dialog box, type a name for the adjustment layer and then click OK .
Photoshop applies a default grayscale conversion to your image.
(Optional) Fine tune your results in the Properties panel
Preset: Select a predefined grayscale mix or a previously saved Custom mix. To save your custom mix, click the properties menu () icon and select Save Black & White Preset. Auto: Sets a grayscale mix based on the color values of your image. The Auto mix often produces excellent results or can be used as the starting point for tweaking gray values using the color sliders. Tint: To apply a color tone, enable Tint. Click the color swatch to open the Color Picker and select the tint color.
Color sliders: Adjust the gray tones of specific color in your image. Drag a slider left to darken or right to lighten the gray tones corresponding to the original color of the image.
- To adjust colors directly on the canvas, use the On-image adjustment tool (). Click on the image and drag left (darken) or right (lighten) to modify the color slider for the corresponding color(s) at that location.
- Click the Reset () icon to reset the adjustment defaults.
Save and share your results
Once you are happy with your black and white transformation, save and share your results in the Adobe Photoshop community and on social media. Don’t forget to tag Adobe Photoshop and hashtag your image with #blackandwhitephotoshop.
To learn more about saving and sharing workflows in Photoshop, see Export files.
