Skip to content

Super8 Filters Guide

🎞️ Filters

Shadow filters allow you to adjust saturation, contrast, brightness, hue, and other visual aspects of the element to achieve unique effects.

DEMO Filters

Saturation

Adjust saturation to change the intensity of colors in the element. You can achieve vibrant or desaturated effects according to your preferences.

Contrast

Contrast controls the difference between lights and shadows in the element. Increase contrast to highlight visual details.

Brightness

Brightness controls the amount of light in the element. Increase brightness to make the element appear brighter.

Hue

Hue allows you to change the color tones in the element. You can create artistic and unique effects with this setting.

Blur

Blur is useful for smoothing the appearance of the element. Adjust this option to achieve a soft and pleasant look.

Sepia

The sepia effect gives the element a vintage and nostalgic look. Adjust this setting to achieve the desired level of sepia.

Invert

The inversion effect reverses the colors in the element. You can create interesting and surprising results with this option.

🖼️ Border

The border filter allows you to customize the appearance of the border around the element. You can adjust its size, roundness, and style to perfectly match your preference.

DEMO BORDER

Border Side

This option allows you to choose the side of the element to which the border will apply. You can configure it to be displayed on one or multiple sides, depending on your needs.

Border Radius

The border radius determines how rounded the edges of the element will be. You can smooth out the edges or make them more angular, depending on your visual style.

Border Style

You can select the style of the border that you like the most. Options include "Solid" "Dashed" "Double" etc, giving you the flexibility to choose the visual effect you desire.

Border Color

Choose a color for the border. You can fully customize the appearance of the border by selecting the color that best suits your overall design.

🌗 Shadow

Shadow is an effective way to highlight the element on the page. You can adjust the shadow to create an elevation effect and add depth.

DEMO SHADOW

Shadow Shift horizontal

Control the horizontal position of the shadow. Adjust this value to determine the direction from which the light comes and create realistic shadows.

Shadow Shift vertical

Shadow shift vertical controls the vertical position of the shadow. Play with this value to achieve the desired elevation effect.

Shadow Spread

Shadow spread determines how far the shadow extends from the element. Increase this value to make the shadow more pronounced.

Shadow Blur

Shadow blur controls the sharpness of the shadow's edges. Adjust this value to create soft or defined shadows.

Shadow Inset

The shadow inset option allows you to simulate a relief effect on the element. You can adjust this setting to make the element appear as if it's carved into the page.

Shadow Color

Choose a color for the shadow. You can fully customize the appearance of the shadow by selecting the color that best fits your overall design.

🔄 Reset and Show/Hide

There is also the option to reset and hide the filters.

DEMO Reset


These controls allow you to fully customize the appearance and style of elements on your web page, providing a high degree of creativity and flexibility.