CSS Properties Related to Filter Effects

Articles

This article explains CSS properties related to filter effects.

You can learn about the uses and how to write properties such as filter and transform.

YouTube Video

HTML for Preview

css-effect.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Filter effects

`filter` property

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

The filter property is used to apply visual effects to elements. You can easily add a variety of effects such as blurring images or elements, adjusting brightness, and changing contrast.

The filtered-image-sepia class has a sepia effect applied.
The filtered-image-opacity class has an opacity effect applied.
The filtered-image-multiple class has brightness, contrast, and sepia effects applied to the image.

Basic Syntax

1filter: none | <filter-function> [<filter-function>]*;

For the filter property, specify none or a filter-function.

Specifying none applies no filter effects.
Specify the filter function to apply in <filter-function>. Multiple filters can be specified by separating them with spaces.

Types of filter functions

`blur()`

1filter: blur(5px);

The blur() function applies a blur effect.

The value is specified in pixels (px) and the larger the value, the stronger the degree of blur.

`brightness()`

1filter: brightness(1.5);

The brightness() function adjusts brightness.

The value is specified based on 0 (completely dark) to 1 (original brightness). Specifying a value greater than 1 makes the element brighter.

`contrast()`

1filter: contrast(2);

The contrast() function adjusts contrast.

The value is specified based on 0 (grayscale) to 1 (original contrast), and values greater than 1 enhance contrast.

`grayscale()`

1filter: grayscale(1);

The grayscale() function converts the element to monochrome.

The value is specified from 0 (original color) to 1 (completely monochrome).

`hue-rotate()`

1filter: hue-rotate(90deg);

The hue-rotate() function rotates the hue.

Values are specified in degrees (deg), applying color changes by rotating the hue. The hue rotates in the range from 0deg to 360deg.

`invert()`

1filter: invert(1);

The invert() function inverts the colors.

Values are specified from 0 (original color) to 1 (completely inverted).

`opacity()`

1filter: opacity(0.5);

The opacity() function changes the transparency of an element.

Values are specified in the range from 0 (completely transparent) to 1 (opaque).

`saturate()`

1filter: saturate(2);

The saturate() function adjusts the saturation.

Values range from 0 (monochrome) to 1 (original saturation), and specifying values greater than 1 enhances saturation.

`sepia()`

1filter: sepia(1);

The sepia() function converts to sepia tone.

Values are specified from 0 (original color) to 1 (full sepia tone).

Applying Multiple Filters

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Multiple filters can be applied, separated by spaces.

Advantages of Using the `filter` Property

The filter property is a powerful tool for creating visually appealing elements easily. It has the following advantages:.

Visual effects can be added easily.
Images can be adjusted using only CSS, without image editing software.
Dynamic effects can be created by combining with animations.

`transform` Property

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

The transform property is used to apply 2D or 3D transformations to elements. Various visual transformations such as position, rotation, scaling (enlarge/reduce), and skewing can be specified with CSS. The transform property is often used in combination with animations and helps in creating dynamic UI elements.

In the transform-scale class, hovering over the element enlarges its width by 1.5 times and its height by 2 times.
In the transform-skew class, hovering over the element rotates it by 30 degrees on the X-axis and 20 degrees on the Y-axis.
In the transform-rotate class, hovering over the element rotates it by 45 degrees and enlarges it by 1.5 times.

Basic Syntax

1transform: none | <transform-function> [<transform-function>]*;

The transform property specifies either none or a transform-function.

If none is specified, no transformation will be applied.
Specify the type of transformation with <transform-function>. Multiple transformations can be applied by separating them with spaces.

Main Transformation Functions

`translate()`

1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */

The translate(x, y) function moves an element by the specified distances along the X and Y axes. Specify x and y using units such as px or %. You can also specify individually with translateX() or translateY().

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

The rotate(angle) function rotates an element by the specified angle in degrees (deg).

`scale()`

1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */

The scale(x, y) function scales an element along the X and Y axes. x and y are scale factors relative to the original size. For example, scale(2, 2) will double the size. You can specify individually with scaleX() or scaleY().

`skew()`

1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);

The skew(x-angle, y-angle) function skews an element by specified angles along the X and Y axes. You can specify individually with skewX() or skewY().

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

The matrix() function specifies a matrix for combining multiple transformations at once. It is usually used in combination with other transformation functions.

3D transformation functions

`translate3d()`

1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;

The translate3d() function performs translation in 3D space.
- It can be specified in three dimensions: X, Y, and Z axes.
By setting the transform-style property to preserve-3d and the perspective property to 600px, a three-dimensional movement effect with depth is applied to the child elements.

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

The rotate3d() function performs rotation in 3D space.
- It rotates an element with respect to the X, Y, and Z axes.

Combining multiple transformations

1transform: rotate(45deg) scale(1.5);

The transform property can apply multiple transformations simultaneously. For example, you can combine rotation and scale.

Key points for usage

The transform property is a powerful tool in CSS for visually transforming elements. By combining various functions, you can create interactive and dynamic UIs.

The transform property allows direct transformation of elements, enabling visual manipulation without altering the DOM layout.
It is very useful for creating animations and interactive elements, enabling dynamic designs when combined with transition or animation.

`transform-origin` property

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

The transform-origin property is used to set the point of origin for transformations applied by the transform property. You can specify the reference point for element transformations, allowing you to control around which position effects like rotation or scaling are applied.

In this example, when you hover the mouse over the element, it rotates and scales simultaneously based on the point specified by the transform-origin property.

Basic Syntax

1transform-origin: x y z;

For the transform-origin property, you specify x, y, and z like this.

For x, specify the reference point on the X-axis (horizontal direction). Values can be specified using keywords (left, center, right) or lengths (px, % etc.).
For y, specify the reference point on the Y-axis (vertical direction). Values can be specified using keywords (top, center, bottom) or lengths.
For z, specify the reference point on the Z-axis (depth direction). It can only be used with 3D transformations. It's optional, and the default is 0.

Default Value

1transform-origin: 50% 50%; /* Center of the element */

The default value for the transform-origin property is the center of the element for both the X and Y axes. This means that, by default, transformations are performed with the center of the element as the reference point.

How to Specify Values

Values for the transform-origin property can be specified using keywords, percentages, lengths like px, em, etc.

Keyword Specification
- left: Sets the X-axis reference to the left edge of the element.
- right: Sets the X-axis reference to the right edge of the element.
- top: Sets the Y-axis reference to the top edge of the element.
- bottom: Sets the Y-axis reference to the bottom edge of the element.
- center: Sets the reference for either the X or Y axis to the center of the element.
Percentage Specification
- 0%: Sets it to the left or top edge.
- 50%: Sets it to the center.
- 100%: Sets it to the right or bottom edge.
Length Specification
- You can finely adjust the reference point using specific lengths like px, em, etc.

`transform-origin` in 3D Transformations

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin can also be used for 3D transformations. In 3D transformations, you can also specify the reference point on the Z-axis. For example, by specifying the center of rotation in the depth direction, transformations with a sense of depth are possible.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS properties related to transparency

CSS Properties Related to Filter Effects

YouTube Video

HTML for Preview

Filter effects

filter property

Basic Syntax

Types of filter functions

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Applying Multiple Filters

Advantages of Using the filter Property

transform Property

Basic Syntax

Main Transformation Functions

translate()

rotate()

scale()

skew()

matrix()

3D transformation functions

translate3d()

rotate3d()

Combining multiple transformations

Key points for usage

transform-origin property

Basic Syntax

Default Value

How to Specify Values

transform-origin in 3D Transformations

YouTube Video

`filter` property

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Advantages of Using the `filter` Property

`transform` Property

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

`transform-origin` property

`transform-origin` in 3D Transformations