CSS Filter Generator

Description of each CSS property

filter

filter allows you to apply an effect (graphic effect) to an image or element. The following values can be specified

• blur
• brightness
• contrast
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia
• drop-shadow

You can also refer to the SVG filter by a URL to the SVG filter element.

Multiple filters can be specified, and if more than one is specified, they are separated by a single-byte space.
If multiple filters are specified, they are applied in the order in which they are specified.
Example description) filter: blur(3px) saturate(120%);
The default value is none.
You can also apply the same thing twice. For example, filter: blur(3px) blur(5px).
It can also be animated with CSS by combining it with hover, etc.

Details of each item are as follows

• blur: Blurs the element. The unit cannot be %. Gaussian Blur (Gaussian Blur, Gaussian Blur, Gaussian Filter, Gaussian Filter) is used for the value. The specified value defines how many pixels on the screen will blend into each other.
• brightness: Adjusts the brightness of the element. Can be lightened or darkened; a value of 100% (or 1) will leave the input unchanged; a value of 0% will result in a completely black image; a value greater than 100% can also be specified; a value of 0 will result in a black image.
• contrast: Adjusts the contrast of an element: a value of 0% produces a completely gray element; a value of 100% produces no change; a value greater than 100% produces a display with a higher contrast ratio.
• grayscale: Makes the element grayscale (monochrome); 100% makes it completely grayscale; 0% makes no change.
• hue-rotate: Rotates the hue of the element; 0deg will result in no change; values greater than 360deg will result in a wrap around (420deg will result in 60deg).
  *Hue is one of the three attributes of color (hue, lightness, and saturation), which characterize colors such as red, orange, yellow, green, blue, sky blue, and purple.
• invert: Inverts the color of the element; at 0% there is no change; at 100% it is completely inverted.
• opacity: Specifies the transparency of the element; a value of 0% makes it completely transparent; 100% makes no change; the result is the same as the CSS opacity property, except that some browsers provide hardware acceleration to improve performance.
• saturate: Changes the saturation of the element; at 100% there is no change; values closer to 0% decrease saturation and values above 100% increase saturation; a value of 0% results in achromatic color.
• sepia: Makes the element sepia-toned; 0% makes no change; 100% makes it completely sepia-toned.
• drop-shadow: Specifies a shadow for the element, similar to box-shadow, but inset cannot be specified. It then generates a shadow along the form of the element. For a PNG image with a transparent background, a shadow is generated along the non-transparent areas. Multiple shadows can be specified. Specifically, an alpha mask of the input image in a specific color, staggered and blurred, is composited under the image. Some browsers display with hardware acceleration to improve performance.
  A total of four values can be specified, such as drop-shadow(horizontal displacementvertical displacementshadow blur amountshadow color)
  Example description) filter: drop-shadow(5px 4px 3px #555);

color

When specifying colors on the Web, "HEX," "RGB," and "HSL" are often used.

First of all, HEX, which you see most often (hexadecimal number), is a way of expressing colors in hexadecimal. It is expressed in the form of #1234ab.
The six digits after # are the values of red (1st~2nd digits), green (3rd~4th digits), and blue (5th~6th digits). Various colors are represented according to the color intensity of each value.
If each of the two digits is the same value, a three-digit expression can be used. For example, #aa9933 can be represented as #a93.
If you want to specify the transparency in hexadecimal, you can use an 8-digit number, with the 7th to 8th digits also in hexadecimal. 80% transparency can be specified with #aa9933CC, for example.

RGB, like HEX, is capable of representing colors in red, green, and blue.
Each value can be specified in the range 0 ~ 255 and is represented as rgb(red value, green value, blue value).
Example description) rgb(10, 50, 220)
If you want to specify transparency, you can use rgba(red value, green value, blue value, transparency(alpha)).
The alpha value can be specified in the range 0~1, for example rgba(0, 0, 255, .5).

HSL stands for Hue, Saturation, and Lightness.
When specifying colors in HSL, colors are specified using these three elements. Once the hue (type and shade of color) is determined, colors can be determined by adjusting saturation and lightness, which is more intuitive than RGB.
The following can be specified: hsl(hue, saturation, lightness)

• Hue：Basically, you can specify a number between 0 and 360. If you specify a number beyond this range, it will be considered as a circumference, so for example, if you specify 380, it will be the same as 20.
• Lightness：You can specify a value between 0 and 100%; the closer to 100%, the brighter the image. Conversely, the closer the value is to 0%, the darker it becomes.

If you want to specify transparency, there is hsla. Like rgba, the final a represents the alpha (transparency).
alpha values can be specified from 0 to 1, for example, hsla(80, 80%, 50%, .5).