Gradients

PROPERTY DESCRIPTION
linear-gradient() Defines characteristics and colors of a gradient background in linear direction
radial-gradient() Defines characteristics and colors of a gradient background in radial form

Transformations

PROPERTY DESCRIPTION
translate(x,y) Defines a 2D transformation
translate3D(x,y,z) Defines a 3D transformation
translateX(x) Creates transformation using only values for X-axis
translateY(y) Creates transformation using only values for Y-axis
translateZ(z) Creates transformation using only values for Z-axis
scale(x,y) Define a 2D scale transformation
scale3D(x,y,z) Defines a 3D scale transformations
scaleX(x) Creates transformation by adding value for the X-axis only
scaleY(y) Creates transformation by adding value for the Y-axis only
scaleZ(z) Creates transformation by adding value for the Z-axis only
rotate(angle) Defines a 2D rotation with the parameter given in degrees
rotate3D(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Creates a 3D rotation along X-axis only
rotateY(angle) Creates a 3D rotation along Y-axis only
rotateZ(angle) Creates a 3D rotation along Z-axis only
skew(x-angle, y-angle) Defines a 2D skewing along X-axis and Y-axis
skewX(angle) Creates a 2D skewing along X-axis only
skewY(angle) Creates a 2D skewing along Y-axis only
matrix(n,n,n,n,n,n) Combines multiple 2D transform methods into one
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Combines 3D transform methods into one in form of 4x4 matrix of 16 values
perspective(n) Creates a perspective view for an 3D element

Animations

PROPERTY DESCRIPTION
cubic-bezier(n,n,n,n) Creates custom defined animation timing values in a cubic-bezier function
steps() Makes the transition appears in defined steps

Filter Effects

PROPERTY DESCRIPTION
blur() Creates a blur effect
brightness() Changes the brightness of an image
contrast() Changes the contrast of an image
drop-shadow() Creates a drop-shadow effect
grayscale() Makes an image appear as a grayscale mode
hue-rotate() Applies a hue-rotation on an image
invert() Inverts an image's colors
opacity() Defines the opacity (transparency) levels
saturate() Saturates an image
sepia() Gives an image a sepia effect
url() Allows us to give a path of a XML file specifying an SVG filter to be applied