CSS: Funciones (lista)

Las funciones CSS son declaraciones que permiten realizar operaciones o procesar datos y se pueden usar como valor en distintas propiedades CSS. Se pueden usar para realizar cálculos matemáticos, aplicar efectos visuales, transformar elementos o indicar colores a través de varios modelos.

Algunas de las funciones más comunes son las que permiten definir colores, como es el caso de rgb() y hsl(); las que permiten realizar cálculos matemáticos, como calc() y abs(); o las que permiten utilizar variables CSS para garantizar la consistencia en una hoja de estilos, como es el caso de var().

Al tratarse de funciones, admiten uno o varios argumentos de entrada para calcular el valor de retorno. Por ejemplo, la función rgb() tiene tres argumentos que representan los valores para los colores rojo, verde y azul. Con el modelo RGB, a través de estos tres colores se obtiene el color resultante.

A continuación se muestra una tabla con las funciones clasificadas según la temática, y se acompaña cada función con una descripción resumida y un enlace hacia el artículo que las describe.

Color

Función	Descripción
`rgb()`	Color según el modelo RGB, sin transparencia.
`hsl()`	Color según el modelo HSL, sin transparencia.
`rgba()`	Color según el modelo RGB, con transparencia.
`hsla()`	Color según el modelo HSL, con transparencia.

Filtros

Función	Descripción
`blur()`	Desenfoca la imagen.
`brightness()`	Ajusta el brillo.
`contrast()`	Ajusta el contraste.
`drop-shadow()`	Añade una sombra.
`grayscale()`	Convierte a escala de grises.
`hue-rotate()`	Aplica una rotación de tono.
`invert()`	Invierte los colores.
`opacity()`	Añade transparencia.
`saturate()`	Ajusta la saturación.
`sepia()`	Convierte a color sepia.

Degradados

Función	Descripción
`linear-gradient()`	Degradado lineal.
`radial-gradient()`	Degradado radial.
`conic-gradient()`	Degradado cónico.
`repeating-linear-gradient()`	Patrón de degradado lineal.
`repeating-radial-gradient()`	Patrón de degradado radial.
`repeating-conic-gradient()`	Patrón de degradado cónico.

Contadores

Función	Descripción
`counter()`	Muestra el valor de un contador.
`counters()`	Trabaja con contadores anidados.

Traslación

Función	Descripción
`translateX()`	Traslada el elemento a través del eje horizontal (X).
`translateY()`	Traslada el elemento a través del eje vertical (Y).
`translate()`	Abreviatura para la traslación en 2D (X, Y).
`translateZ()`	Traslada el elemento a través de la profundidad (Z).
`translate3d()`	Abreviatura para la traslación en 3D (X, Y, Z).

Rotación

Función	Descripción
`rotateX()`	Rota el elemento a través del eje horizontal (X).
`rotateY()`	Rota el elemento a través del eje vertical (Y).
`rotateZ()`	Rota el elemento a través de la profundidad (Z).
`rotate()`	Rota el elemento sobre sí mismo.
`rotate3d()`	Abreviatura para rotar en los tres ejes (X, Y, Z).

Escalado

Función	Descripción
`scaleX()`	Escala el elemento a través del eje horizontal (X).
`scaleY()`	Escala el elemento a través del eje vertical (Y).
`scale()`	Abreviatura para el escalado en 2D (X, Y).
`scaleZ()`	Escala el elemento a través de la profundidad (Z).
`scale3d()`	Abreviatura para el escalado en 3D (X, Y, Z).

Deformación

Función	Descripción
`skewX()`	Deforma el elemento a través del eje horizontal (X).
`skewY()`	Deforma el elemento a través del eje vertical (Y).

Perspectiva

Función	Descripción
`perspective()`	Indica el punto de fuga.

Matrices

Función	Descripción
`matrix()`	Establece una matriz de transformación 2D.
`matrix3d()`	Establece una matriz de transformación 3D.

Cálculo matemático

Función	Descripción
`calc()`	Realiza operaciones aritméticas.
`max()`	Obtén el valor más grande.
`min()`	Obtén el valor más pequeño.
`clamp()`	Ajusta un valor entre dos valores.
`round()`	Redondea un valor.
`mod()`	Obtén el módulo entre dos valores.
`rem()`	Obtén el residuo entre dos valores.
`sin()`	Calcula el seno.
`cos()`	Calcula el coseno.
`tan()`	Calcula la tangente.
`asin()`	Calcula la inversa del seno.
`acos()`	Calcula la inversa del coseno.
`atan()`	Calcula la inversa de al tangente.
`atan2()`	Calcula la arcotangente con 2 parámetros.
`pow()`	Calcula la potencia de un número.
`sqrt()`	Calcula la raíz cuadrada.
`hypot()`	Calcula la hipotenusa.
`log()`	Calcula el logaritmo de un número.
`exp()`	Calcula el valor exponencial de un número.
`abs()`	Obtén el valor absoluto de un número.
`sign()`	Determina el signo de un número.

Figuras geométricas

Función	Descripción
`inset()`	Define un rectángulo interior.
`circle()`	Define una figura circular.
`ellipse()`	Define una figura elíptica.
`polygon()`	Define una figura poligonal.
`path()`	Define una figura a partir de un trayecto SVG.
`rect()`	Define un rectángulo con distancias desde los bordes.
`xywh()`	Define un rectángulo con desplazamiento y tamaño.