Home

ToolsBlog


CSS Contrast Generator BETA

Configuration

Contrast

Class

Preview

Parliament of Hungary, Budapest

Code

CSS Contrast Generator

The CSS filter property allows you to apply a number of image editing effects to an HTML element, such as an image or a text box. One such effect is contrast, which allows you to adjust the contrast of an element.

The contrast value determines how different the colors of the image are from the original. A higher contrast value increases the difference between the colors, while a lower value decreases this difference.

Here is an example of how you can use the contrast property in CSS:

img { filter: contrast(100%); } img.high-contrast { filter: contrast(150%); } img.low-contrast { filter: contrast(70%); }

In this example, the filter property is applied to an image with three different contrast values. The default value is 100%, which does not change the contrast. The values assigned to the high-contrast and low-contrast classes increase and decrease the contrast respectively.

It is important to note that support for the filter property may vary from browser to browser, and not all browsers provide the same filtering effects. Check your browser compatibility and test the desired effects in multiple browsers to make sure they work properly.


Top tools

Code Hub
Color PaletteNEW
Strong Password GeneratorColor PickerSocial Media Username Checker

Select Language

Set theme

© 2024 ReadyTools. All rights reserved.