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; } .Beginner { font-size: 17px; text-align: center; } </ style > </ head > < body > < div id = "main" > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" > A computer science portal for Beginner </ div > </ div > </ body > </ html > |
Output:
The complete list of CSS Functions is given below:
Functions |
Description |
Example |
---|---|---|
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. |
Contact Us