Obermoser Branding Color Image Gradient & Duotone Filters

How to Use and Customize These Filters

This system now has two main modes: Gradient Overlay and Duotone. Both use CSS Custom Properties for maximum flexibility.

How the Gradient Overlay is Applied

This technique tints the image by placing a semi-transparent gradient over it. It uses mix-blend-mode: color;, which applies the hue and saturation from the gradient to the brightness values of the original image, preserving its texture and detail.

How the Duotone Filter is Applied

This is a true duotone effect that first converts the image to grayscale and then remaps the light and dark tones to the two selected colors. It works by creating two layers:

• A base layer showing the original, full-color image.
• A top layer showing the 100% pure duotone version of the image, created with an SVG filter.

The "Effect Intensity" slider controls the opacity of the top duotone layer, allowing you to blend it smoothly with the original image. For visual purity, the Brightness and Contrast sliders are disabled in this mode.

A Note on Rendering and Download Formats

The live filter previews in the galleries use CSS, while the downloadable image is generated using the HTML Canvas API. Great care has been taken to ensure that the logic for both modes is identical, so the image you download should be a perfect match to the one you see in the live preview.

You can choose to download images as JPG, WebP, or PNG. For JPG and WebP, you can also set a quality level (from 0.1 to 1.0) to control file size. Here are some suggestions:

• For Web Usage (good compression): A quality setting of 0.75 to 0.85 usually provides a great balance between visual quality and small file size.
• For Email Distribution (decent compression): A value around 0.6 to 0.7 can significantly reduce file size to make emailing easier, with a slight but acceptable loss in quality.
• For Maximum Quality: Use 1.0 for the highest quality output, resulting in a larger file size.
• PNG Format: PNG is a lossless format, so the quality setting does not apply and will be hidden when PNG is selected. It is best for images requiring transparency or perfect fidelity, but usually results in the largest files.

Live Color and URL Editing

You can edit the branding colors or the showcase image URLs in the sections above. All changes will be reflected instantly in the galleries.

Complete Filter Removal

To completely remove all filter effects from an image in either mode, add the nofilter class to the container:

<div class="image-container nofilter"><img src="..." alt="..."></div>

Individual Property Control

Change intensity for one image (works in both modes): 75% is written as 0.75.

<div class="image-container" style="--effect-intensity: 0.75;">...</div>

Change brightness or contrast for one image (Gradient mode only):

<img src="..." style="--image-brightness: 1.5; --image-contrast: 1;">

Change gradient colors for a specific image (Gradient mode only):

<div class="image-container" style="--local-gradient-dark-color: #ff0000;">...</div>

In Duotone mode, the colors are tied to the data-color-preset of the parent .image-group, which is necessary for the SVG filter to be applied correctly.