CSS Functions Complete Reference
CSS functions are used to set the various CSS property. For example, the attr() function is used to retrieve the value of the HTML attribute.
Example: Below example illustrates the radial-gradient() function in CSS:
HTML
<!DOCTYPE html><html> <head> <title>CSS Gradients</title> <style> #main { height: 250px; width: 600px; background-color: white; background-image: radial-gradient(#090, #fff, #2a4f32); } .gfg { text-align:center; font-size:40px; font-weight:bold; padding-top:80px; } .geeks { font-size:17px; text-align:center; } </style> </head> <body> <div id="main"> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks"> A computer science portal for geeks </div> </div> </body></html> |
Output:
The complete list of CSS Functions is given below
Functions | Description |
|---|---|
| attr() | Returns the value of an attribute of the selected elements. |
| attr() | Returns the value of an attribute of the selected elements. |
| blur() | Apply a blurred effect filter on the image. |
| brightness() | Apply a filter to set the brightness of the image. |
| calc() | Returns the value of an attribute of the selected elements. |
| circle() | Create floating text around the circular shape picture or anything else |
| conic-gradient() | Set a conic gradient as the background image. |
| contrast() | Apply a filter to set the contrast of the image. |
| cubic-bezier() | Define a Cubic Bezier curve. |
| drop-shadow() | Apply a filter to the image to set the shadow of the image. |
| ellipse() | Create floating text around the ellipse shape picture or anything else. |
| env() | Insert the value of a user agent-defined environment variable into your CSS. |
| grayscale() | Apply a filter to the image to set the grayscale of the image. |
| hsl() | Define the colors using the Hue-saturation-lightness model (HSL). |
| hsla() | Define the colors using the Hue Saturation Lightness Alpha (HSLA) model. |
| hue-rotate() | Apply a filter to the image to set the hue rotation of the image. |
| inset() | It is used with the filter property to change the inset of images. |
| invert() | Set the invert of the color of the sample image. |
| linear-gradient() | Set the linear gradient as the background image. |
| matrix() | Create a homogeneous 2D transformation matrix. |
| matrix3d() | Create a 3D transformation as a 4×4 homogeneous matrix. |
| max() | Return the largest value from a set of comma-separated values. |
| min() | Return minimum value from a set of comma-separated values. |
| opacity() | Apply a filter to the image to set the transparency of the image. |
| perspective() | It is used with the transform property to set the perspective effect on images. |
| polygon() | It is used with the filter property to create a polygon of images or text. |
| radial-gradient() | Set a radial gradient as the background image. |
| repeating-conic-gradient() | Repeat conic gradients in the background image. |
| repeating-linear-gradient() | It is used to repeat linear gradients. |
| repeating-radial-gradient() | It is used to repeat radial gradients. |
| rgb() | It is used to define the colors using the Red Green Blue (RGB) model. |
| rgba() | It is used to define the colors using the Red-Green-Blue-Alpha (RGBA) model. |
| rotate() | Rotate an element based on the given angle as an argument. |
| rotate3d() | Set the style in web pages that contain HTML elements. |
| rotateX() | Rotate an element around the x-axis. |
| rotateY() | Rotate an element around the vertical axis. |
| rotateZ() | Rotate an element around the z-axis. |
| saturate() | It is used to super-saturate or desaturate the input image. |
| scale() | It is used to resize the element in 2D plane. |
| scale3d() | Resize the element in a 3D space. It scales the elements in x, y, and z planeR |
| scaleX() | Resize an element along the x-axis in a 2D plane. |
| scaleY() | Resize an element along the y-axis in a 2D plane. |
| scaleZ() | Resize an element along the z-axis. |
| sepia() | Apply a filter to the image to convert an image into a sepia image. |
| skew() | It is used to transform an element in the 2D plane. |
| skewX() | Transform an element in the horizontal direction in a 2D plane. |
| skewY() | Transform an element in the vertical direction in a 2D plane. |
| translate() | Reposition an element in a horizontal and vertical direction. |
| translate3d() | Reposition an element in 3D space. |
| translateX() | Reposition the element along the horizontal axis. |
| translateY() | Reposition the element along the vertical axis. |
| translateZ() | Reposition the element along the z-axis in 3D space. |
| url() | It is used to include a file. |
| var() | Insert a value for custom property. |
Please Login to comment...