04 CSS Functions

Link back to R&D Page

CSS Function Examples

calc()

The calc() function allows you to perform mathematical calculations within CSS property values. It can be used to dynamically calculate lengths, percentages, and other numerical values. For example, you can use calc() to specify complex width or height values, adjust padding or margins based on dynamic conditions, or create responsive layouts.

rgb()

The rgb() function is used to define colors using the RGB (Red, Green, Blue) color model. It allows you to specify a color by providing the intensity of red, green, and blue components. Each component is specified as an integer value between 0 and 255.

rotate()

The rotate() function is used to rotate an element around a specified point. It accepts a single parameter specifying the angle of rotation, which can be specified in degrees (deg), radians (rad), gradians (grad), or turns (turn). Positive values rotate the element clockwise, while negative values rotate it counterclockwise.

linear-gradient()

The linear-gradient() function is used to create linear gradients as background images. It allows you to specify a gradual transition between two or more colors along a straight line. You can customize the gradient direction, start and end points, and color stops to create a variety of gradient effects.