- CSS Tutorial
- CSS - Home
- CSS - Roadmap
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Types
- CSS - Measurement Units
- CSS - Selectors
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS - Cascading
- CSS Selectors
- CSS - Universal Selectors
- CSS - ID Selectors
- CSS - Group Selectors
- CSS - Class Selectors
- CSS - Child Selectors
- CSS - Element Selectors
- CSS - Descendant Selectors
- CSS - General Sibling Selectors
- CSS - Adjacent Sibling Selectors
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Advanced Features
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS Interview Questions
- CSS Online Quiz
- CSS Online Test
- CSS Mock Test
- CSS - Quick Guide
- CSS - Cheatsheet
- CSS - Properties References
- CSS - Functions References
- CSS - Color References
- CSS - Web Browser References
- CSS - Web Safe Fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Functions Reference
This chapter is a CSS functions reference page and lists down each functions used in CSS. For detailed information about any function, visit respective function pages.
| Function | Description |
|---|---|
| acos() | CSS acos() function returns the inverse cosine of a value in the range -1 and 1. |
| asin() | CSS asin() function returns the inverse sine of a number between -1 and 1. |
| atan() | CSS atan() function returns the inverse tangent of a number between -infinity and infinity. |
| atan2() | CSS atan2() function returns the inverse tangent of two values between -infinity and infinity. |
| attr() | CSS attr() function returns the value of an attribute of the selected element. |
| blur() | CSS blur() function applies a Gaussian blur to the elements on which it is applied. |
| brightness() | CSS brightness() function sets the brightness of an element. |
| calc() | CSS calc() function performs calculations to determine CSS property values. |
| circle() | CSS circle() function defines a circle. |
| clamp() | CSS clamp() function sets a value for adjusting responsively between a minimum and maximum |
| color() | CSS color() function allows a color to be specified in a particular, specified color space. |
| color-mix() | CSS color-mix() function is used to mix two color values by a given amount. |
| conic-gradient() | CSS conic-gradient() is used to creates a conic gradient. |
| contrast() | CSS contrast() function sets the contrast of an element. |
| cos() | CSS cos() function returns the cosine of an angle. |
| counter() | CSS counter() function returns the current value of the counter. |
| counters() | CSS counters() function returns the current values of the nested and named counters. |
| cubic-bezier() | CSS cubic-bezier() function defines a custom cubic bezier curve for animations. |
| drop-shadow() | CSS drop-shadow() function applies a drop shadow effect to an image. |
| ellipse() | CSS ellipse() function is used to define an ellipse. |
| env() | CSS env() function adds a value to a user-defined environment variable in your CSS. |
| exp() | CSS exp() function returns the value of e raised to the power of a given number. |
| fit-content() | CSS fit-content() function resizes an element based on its content. |
| grayscale() | CSS grayscale() function sets the grayscale of an image. |
| hsl() / hsla() | CSS hsl() function defines a color using the Hue-Saturation-Lightness model, with an optional alpha that represents the opacity. |
| hue-rotate() | CSS hue-rotate() function rotates the hue of an element's colors. |
| hwb() | CSS hwb() function defines a color using the Hue-Whiteness-Blackness model, with an optional alpha that represents the opacity. |
| hypot() | CSS hypot() function returns the square root of the sum of the squares of the numbers. |
| inset() | CSS inset() function defines a rectangle at the specified inset distances from each side of the reference box. |
| invert() | CSS invert() function inverts the colors of an element. |
| lab() | CSS lab() function expresses a color in CIE L*a*b color space. |
| lch() | CSS lch() function expresses a color in LCH(Lightness Chroma Hue) color space. |
| linear-gradient() | CSS linear-gradient() function is used to create a linear gradient. |
| log() | CSS log() function returns the natural logarithm (e) of a given number. |
| matrix() | CSS matrix() function defines a 2D transformation with homogeneous coordinates. |
| matrix3d() | CSS matrix3d() function defines a 3D transformation using a 4x4 matrix of 16 values. |
| max() | CSS max() function specify the largest (most positive) value from a list of comma-separated expressions. |
| min() | CSS min() function specify the lowest value from a list of comma-separated expressions. |
| minmax() | CSS minmax() function defines a size range for CSS grid columns or rows. |
| mod() | CSS mod() function calculates the modulus of two numbers when divided. |
| opacity() | CSS opacity() function function sets the transparency level of an element. |
| oklab() | CSS oklab() function expresses a color in the oklab color space. |
| oklch() | CSS oklch() function expresses a color in oklch color space. |
| perspective() | CSS perspective() function defines a perspective view for a 3D transformed element. |
| polygon() | CSS polygon() function is used to define a polygon. |
| pow() | CSS pow() function returns the value of a base raised to the power of a number. |
| radial-gradient() | CSS radial-gradient() function is used to create a radial gradient. |
| repeat() | CSS repeat() function is used for repeating columns or rows in a CSS grid. |
| repeating-conic-gradient() | CSS repeating-conic-gradient() repeats a conic gradient. |
| repeating-linear-gradient() | CSS repeating-linear-gradient() repeats a linear gradient. |
| repeating-radial-gradient() | CSS repeating-radial-gradient() repeats a radial gradient. |
| rgb() | CSS rgb() function sets the colors using the Red-Green-Blue model (RGB) value. |
| rotate() | CSS rotate() function defines a 2D rotation of an element. |
| rotate3d() | CSS rotate3d() function rotates an element around a fixed axis on the three-dimensional surface. |
| rotateX() | CSS rotateX() function rotates an element around the x-axis. |
| rotateY() | CSS rotateY() function rotates an element around the y-axis. |
| rotateZ() | CSS rotateZ() function rotates an element around the z-axis. |
| round() | CSS round() function returns a rounded number. |
| saturate() | CSS saturate() function sets the saturation level of an element. |
| scale() | CSS scale() function applies a scaling transformation to an element on the two-dimensional plane. |
| scale3d() | CSS scale3d() function applies a scaling transformation to an element on the three-dimensional plane. |
| scaleX() | CSS scaleX() function applies a scaling transformation to an element along the x-axis. |
| scaleY() | CSS scaleY() function applies a scaling transformation to an element along the y-axis. |
| scaleZ() | CSS scaleZ() function applies a scaling transformation to an element along the z-axis. |
| sepia() | CSS sepia() function applies and sets a sepia (warm, yellowish/brownish) effect to an element. |
| sin() | CSS sin() function calculates the sine of a given number and returns a result in the range -1 to 1. |
| skew() | CSS skew() function specifies a transformation that slants an element on the 2D plane. |
| skewX() | CSS skewX() function specifies a transformation that slants an element horizontally on the 2D plane. |
| skewY() | CSS skewY() function specifies a transformation that slants an element vertically on the 2D plane. |
| sqrt() | CSS sqrt() function returns the square root of a given number. |
| tan() | CSS tan() function returns the tangent of a number. |
| translate() | Re-positions an element along the x- and y-axis |
| translateX() | CSS translateX() function translates, or moves, an element horizontally along the X-axis. |
| translateY() | CSS translateY() function translates, or moves, an element vertically along the Y-axis. |
| url() | CSS url() function is used to include a file in the HTML document. |
| var() | CSS var() function is used to insert the value of a custom property. |
Advertisements