contrast()
Quick Summary for contrast()
The contrast() CSS function adjusts the contrast of the input image. Its result is a <filter-function>.
Code Usage for contrast()
contrast(amount)
More Details for contrast()

contrast()

The contrast() CSS function adjusts the contrast of the input image. Its result is a <filter-function>.

Syntax

contrast(amount)

Parameters

amount

The contrast of the result, specified as a <number> or a <percentage>. A value under 100% decreases the contrast, while a value over 100% increases it. A value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.

Examples

Setting contrast using numbers and percentages

contrast(0)     /* Completely gray */ contrast(65%)   /* 65% contrast */ contrast(1)     /* No effect */ contrast(200%)  /* Double contrast */

Specifications

Specification
Filter Effects Module Level 2 # funcdef-filter-contrast

See also

<filter-function> blur() brightness() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia()

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS right 1
CSS hue 2
CSS blur 2
CSS height 1
CSS hue-rotate 2
CSS invert 7
CSS active 2
CSS iframe 2
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Windows
Random CSS Property

drop-shadow()

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.
drop-shadow() css reference