filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Tip: To use multiple filters, separate each filter with a space.

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

none

• Default value. Specifies no effects

blur(px)

• Applies a blur effect to the image. A larger value will create more blur.

If no value is specified, 0 is used.	

brightness(%)

• Adjusts the brightness of the image.

0% will make the image completely black.
100% (1) is default and represents the original image.
Values over 100% will provide brighter results.	

contrast(%)

• Adjusts the contrast of the image.

0% will make the image completely black.
100% (1) is default, and represents the original image.
Values over 100% will provide results with more contrast.

drop-shadow(h-shadow v-shadow blur spread color)

• Applies a drop shadow effect to the image.

Possible values:
h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).

spread - Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color - Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

Tip: This filter is similar to the box-shadow property.

grayscale(%)

• Converts the image to grayscale.

0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).

Note: Negative values are not allowed.	

hue-rotate(deg)

• Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

Note: Maximum value is 360deg.

invert(%)

• Inverts the samples in the image.

0% (0) is default and represents the original image.
100% will make the image completely inverted.

Note: Negative values are not allowed.

opacity(%)

• Sets the opacity level for the image. The opacity-level describes the transparency-level, where:

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

Note: Negative values are not allowed.
Tip: This filter is similar to the opacity property.

saturate(%)

• Saturates the image.

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

Note: Negative values are not allowed.

sepia(%)

• Converts the image to sepia.

0% (0) is default and represents the original image.
100% will make the image completely sepia.

Note: Negative values are not allowed.

url()

• The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

initial

• Sets this property to its default value.

inherit

• Inherits this property from its parent element.

font-display : auto | block | swap | fallback | optional;

• auto - The font display strategy is defined by the user agent.
• block - Gives the font face a short block period and an infinite swap period.
• swap - Gives the font face an extremely small block period and an infinite swap period.
• fallback - Gives the font face an extremely small block period and a short swap period.
• optional - Gives the font face an extremely small block period and no swap period.

The font display timeline

• Block period - If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
• Swap period - If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
• Failure period - If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

• normal - This is default. Sets the blending mode to normal.
• multiply - Sets the blending mode to multiply.
• screen - Sets the blending mode to screen.
• overlay - Sets the blending mode to overlay.
• darken - Sets the blending mode to darken.
• lighten - Sets the blending mode to lighten.
• color-dodge - Sets the blending mode to color-dodge.
• color-burn - Sets the blending mode to color-burn.
• difference - Sets the blending mode to difference.
• exclusion - Sets the blending mode to exclusion.
• hue - Sets the blending mode to hue.
• saturation - Sets the blending mode to saturation.
• color - Sets the blending mode to color.
• luminosity - Sets the blending mode to luminosity.

object-fit: fill | contain | cover | none | scale-down;

• fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
• contain - The image keeps its aspect ratio, but is resized to fit within the given dimension.
• cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
• none - The image is not resized.
• scale-down - the image is scaled down to the smallest version of none or contain.

place-items: normal legacy | value | initial | inherit;

• normal legacy - Default. The element's default place-items value. The default value for align-items is normal, and the default value for justify-items is legacy.
• baseline - Items are positioned at the baseline of the container.
• center - Align items to the center of the grid cell.
• end - Align items at the end of the grid cell.
• start - Align items at the start of the grid cell.
• stretch - Stretches grid items to fill the grid container if the grid item sizes are not set.
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.

resize: none | both | horizontal | vertical | initial | inherit;

• none - Default value. The user cannot resize the element.
• both - The user can resize both the height and width of the element.
• horizontal - The user can resize the width of the element.
• vertical - The user can resize the height of the element.
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.

scroll-behavior: auto | smooth | initial | inherit;

• auto - Allows a straight jump scroll effect between elements within the scrolling box. This is default.
• smooth - Allows a smooth animated scroll effect between elements within the scrolling box.
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.

shape-outside: none | basic-shape | shape-box | initial | inherit;

basic-shape

(inset(), circle(), ellipse(), polygon())

shape-box

(margin-box, border-box, padding-box, content-box)

text-emphasis: none | filled | open | dot | circle | double-circle | triangle | sesame | string | color

• none - No emphasis marks are applied.
• filled - The emphasis marks are filled with a solid color.
• open - The emphasis marks are hollow.
• dot - The emphasis marks are small circles.
• circle - The emphasis marks are circles.
• double-circle - The emphasis marks are double circles.
• triangle - The emphasis marks are triangles.
• sesame - The emphasis marks are sesames.
• string - The emphasis marks are the given string (one character).
• color - Sets the color of the emphasis marks.

user-select: auto | none | text | all;

• auto - Default. Text can be selected if the browser allows it.
• none - Prevent text selection.
• text - The text can be selected by the user.
• all - Text selection is made with one click instead of a double-click.

writing-mode: horizontal-tb | vertical-rl | vertical-lr

• horizontal-tb - Let the content flow horizontally from left to right, vertically from top to bottom.
• vertical-rl - Let the content flow vertically from top to bottom, horizontally from right to left.
• vertical-lr - Let the content flow vertically from top to bottom, horizontally from left to right.