CSS advanced effects allow the creation of visually rich and modern websites without using image editing software or JavaScript. These effects work directly in the browser and are fully customizable.
The filter property applies visual effects to elements, such as blur (blur), removing
colors (grayscale), sepia effect, and adjusting brightness and contrast. The
backdrop-filter property applies the same effects to the background behind the element
– ideal for frosted glass windows (glassmorphism).
With mix-blend-mode, we blend element colors with their background, object-fit controls
how images occupy space, and clip-path cuts elements into arbitrary shapes. The opacity
and visibility properties control element visibility, while cursor changes the mouse
pointer.
| Property | Example | Description |
|---|---|---|
| Filter (Visual Effects) | ||
filter: blur() | filter: blur(5px); |
Blurs the element (higher value = more blur) |
filter: brightness() | filter: brightness(1.5); |
Adjusts brightness (1 = normal, >1 = brighter, <1 = darker) |
filter: contrast() | filter: contrast(2); |
Adjusts contrast (1 = normal) |
filter: grayscale() | filter: grayscale(100%); |
Removes colors (100% = black & white, 0% = normal) |
filter: sepia() | filter: sepia(100%); |
Applies sepia (vintage) effect |
filter: saturate() | filter: saturate(2); |
Adjusts color saturation (1 = normal) |
filter: hue-rotate() | filter: hue-rotate(90deg); |
Rotates the color hue by a specified angle |
filter: invert() | filter: invert(100%); |
Inverts colors (negative) |
filter: drop-shadow() | filter: drop-shadow(5px 5px 10px black); |
Shadow that respects the element shape (better than box-shadow) |
| Backdrop-Filter (Effects Behind) | ||
backdrop-filter: blur() | backdrop-filter: blur(10px); |
Blurs the background behind the element (glassmorphism effect) |
backdrop-filter: brightness() | backdrop-filter: brightness(1.2); |
Adjusts brightness of the background behind the element |
backdrop-filter: saturate() | backdrop-filter: saturate(1.5); |
Adjusts saturation of the background behind the element |
| Blend Mode (Color Blending) | ||
mix-blend-mode | mix-blend-mode: multiply; |
Blends element colors with background (multiply, screen, overlay, darken, lighten...) |
background-blend-mode | background-blend-mode: overlay; |
Blends multiple backgrounds of the same element |
| Visibility | ||
opacity | opacity: 0.5; |
Transparency of the entire element (0 = invisible, 1 = fully visible) |
visibility | visibility: hidden; |
Hides the element but keeps its space (visible, hidden, collapse) |
| Images and Shapes | ||
object-fit | object-fit: cover; |
How the image occupies the space (cover, contain, fill, none, scale-down) |
object-position | object-position: center top; |
Position of the image within the container |
clip-path | clip-path: circle(50%); |
Cuts the element into a shape (circle, ellipse, polygon, inset) |
| Cursor and Interaction | ||
cursor | cursor: pointer; |
Changes the mouse pointer (pointer, crosshair, move, text, wait, not-allowed...) |
pointer-events | pointer-events: none; |
Disables clicking on the element (none, auto) |
