20 CSS functions with examples

1. calc()

Used for dynamic calculations of values.

				
					div {
  width: calc(100% - 20px);
}

2. var()

Allows you to use CSS custom properties (CSS variables).

				
					:root {
  --main-color: #3498db;
}
div {
  background-color: var(--main-color);
}

3. clamp()

Constrains a value between a defined minimum and maximum.

				
					div {
  font-size: clamp(14px, 4vw, 24px);
}

4. min()

Returns the minimum value from a list of values.

				
					div {
  width: min(50%, 300px);
}

5. max()

Returns the maximum value from a list of values

				
					div {
  width: max(50%, 200px);
}

6. rgb()

Defines a color using red, green, and blue component

				
					div {
  background-color: rgb(255, 99, 71);
}

7. rgba()

Defines a color using red, green, blue, and alpha (transparency).

				
					div {
  background-color: rgba(255, 99, 71, 0.5);
}

8. hsl()

Defines a color using hue, saturation, and lightness.

				
					div {
  background-color: hsl(200, 100%, 50%);
}

9. hsla()

Defines a color using hue, saturation, lightness, and alpha (transparency).

				
					div {
  background-color: hsla(200, 100%, 50%, 0.5);
}

10. url()

Specifies a URL for resources like background images.

				
					div {
  background-image: url('image.jpg');
}

11. rotate()

Rotates an element by a specified angle.

				
					div {
  transform: rotate(45deg);
}

12. translate()

Moves an element from its current position.

				
					div {
  transform: translate(50px, 100px);
}

13. scale()

Resizes an element.

				
					div {
  transform: scale(1.5);
}

14. skew()

Skews an element along the X and Y axes.

				
					div {
  transform: skew(30deg, 20deg);
}

15. perspective()

Defines the perspective for 3D transformations.

				
					div {
  transform: perspective(500px) rotateY(45deg);
}

16. transition()

Defines a transition effect for properties.

				
					div {
  transition: all 0.3s ease-in-out;
}
div:hover {
  background-color: #3498db;
}

17. box-shadow()

Applies a shadow effect to an element’s box.

				
					div {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

18. filter()

Applies graphical effects like blur, brightness, etc..

				
					div {
  filter: blur(5px);
}

19. brightness()

Adjusts the brightness of an element.

				
					div {
  filter: brightness(0.5);
}

20. invert()

Inverts the colors of an element.

				
					div {
  filter: invert(100%);
}

These functions help in creating dynamic, responsive, and visually rich layouts. They allow for complex effects and transformations with minimal code.