CSS FUNCTIONS

Filter Functions:

CSS filter functions allow you to apply graphical effects like blurring,
brightness adjustment, contrast changes, etc., to images, backgrounds, and
even text elements. They are chainable and can be animated for dynamic
effects.

Syntax:

selector {
filter: function1(value) function2(value) ...;
}

1. blur()

Applies a Gaussian blur to the element.

Syntax: blur(radius)

Examples:

img { filter: blur(5px); } /* Slight blur */

div:hover { filter: blur(10px); } /* Strong blur on hover */

2. brightness()

Adjusts the brightness.

Syntax: brightness(percentage)

Examples:

img { filter: brightness(150%); } /* Brighter */

img.dark { filter: brightness(50%); } /* Dimmer */

Adjusts the contrast.

Syntax: contrast(percentage)

Examples:

img { filter: contrast(200%); } /* High contrast */

img.low-contrast { filter: contrast(70%); } /* Low contrast */

4. grayscale()

Converts the element to grayscale.

Syntax: grayscale(percentage)

Examples:

img { filter: grayscale(100%); } /* Complete grayscale */

img:hover { filter: grayscale(50%); } /* Partial grayscale on hover */

5. hue-rotate()

Rotates the hue of colors.

Syntax: hue-rotate(degrees)

Examples:

img { filter: hue-rotate(90deg); } /* Greenish tint */

img:hover { filter: hue-rotate(180deg); } /* Inverted hues */

6. invert()

Inverts the colors.

img { filter: invert(100%); } /* Fully inverted colors */

button:hover { filter: invert(50%); } /* Partially inverted on hover */

7. opacity()

Adjusts transparency.

Syntax: opacity(percentage)

Examples:

img { filter: opacity(50%); } /* 50% transparent */

img:hover { filter: opacity(80%); } /* Slightly transparent on hover */

8. saturate()

Adjusts color saturation.

Syntax: saturate(percentage)

Examples:

img { filter: saturate(200%); } /* Highly saturated colors */

img.low-sat { filter: saturate(30%); } /* Faded colors */

9. sepia()

Applies a warm brown tone.

Syntax: sepia(percentage)

Examples:

img { filter: sepia(100%); } /* Full sepia effect */

img:hover { filter: sepia(60%); } /* Slight sepia on hover */

Adds a shadow to the element (works like box-shadow but on images with alpha
transparency).

Syntax: drop-shadow(offset-x offset-y blur-radius color)

Examples:

img { filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)); } /* Soft shadow */

img:hover { filter: drop-shadow(0 0 20px red); } /* Glow effect on hover */

11. none

Removes all filters.

Example:

img { filter: none; } /* Resets all filters */

Chaining Multiple Filters Example:

img {
filter: brightness(120%) contrast(110%) blur(2px);
}

●​ Points to remember 😇:
❖​ Filters can be animated using CSS transitions.

❖​ They work on all elements including images, divs, backgrounds, and text.

❖​ GPU acceleration may be used for smoother performance.

❖​ drop-shadow() respects image transparency, unlike box-shadow.

1. url()

Loads external resources like images, fonts, audio, video, etc.

Syntax: url("path/to/resource")

Usage Areas: background-image, @font-face, list-style-image, content, etc.

Examples:

div {
background-image: url("images/bg-pattern.png"); /* Background Image */
}

@font-face {
font-family: 'MyFont';
src: url("fonts/myfont.woff2") format('woff2'); /* Custom Font */
}

Shape and Clip Functions

1. circle()

Clips the element into a circular shape.

Syntax: circle(radius at position)

Examples:

img {
clip-path: circle(50% at center); /* Perfect circle at center */
}

div {
clip-path: circle(75px at 30% 40%); /* Circle at custom position */
}
2. ellipse()

Clips the element into an elliptical shape.

Syntax: ellipse(rx ry at position)

Examples:

div {
clip-path: ellipse(60% 40% at center); /* Ellipse at center */
}

img {
clip-path: ellipse(100px 50px at 20% 50%); /* Ellipse at custom point */
}

3. inset()

Defines a rectangular inset clipping region with optional rounded corners.

Syntax: inset(top right bottom left round border-radius)

Examples:

div {
clip-path: inset(20px 30px 20px 30px); /* Rectangle inset */
}

div.rounded {
clip-path: inset(10% round 20px 40px); /* Rounded rectangle inset */
}

4. polygon()

Defines a custom polygon clipping path with specified coordinates.

Syntax: polygon(x1 y1, x2 y2, ...)

Examples:
div {
clip-path: polygon(0 0, 100% 0, 50% 100%); /* Triangle */
}

div.custom-shape {
clip-path: polygon(0 0, 100% 20%, 80% 100%, 20% 100%); /* Irregular polygon */
}

5. path()

Uses SVG path data to create complex clipping shapes.

Syntax: path('SVG path data')

Examples:

div {
clip-path: path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80'); /* Complex curve */
}

img {
clip-path: path('M50 0 L100 100 L0 100 Z'); /* Triangle using path */
}