CSS Functions Reference (MDN) - Free Download
Reference of 105 CSS functions from MDN Web Docs, including syntax, status, CSS specification groups, and documentation URLs. Contains 105 records. Download in Excel, CSV, PDF formats.
📥 Free Download
💡 Key Takeaways
- Contains 105 records / 5 fields
- Available for free download in Excel, CSV, and PDF formats
- Data sourced from: https://github.com/mdn/data
📋 ข้อมูลทั้งหมด
Showing 105
of 105
| Function | Syntax | Groups | Status | Mdn Url |
|---|---|---|---|---|
| abs() | abs( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/abs |
| acos() | acos( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/acos |
| anchor() | anchor( <anchor-name>? && <anchor-side>, <length-percentage>? ) | CSS Anchor Positioning | experimental | https://developer.mozilla.org/docs/Web/CSS/anchor |
| anchor-size() | anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) | CSS Anchor Positioning | experimental | https://developer.mozilla.org/docs/Web/CSS/anchor-size |
| asin() | asin( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/asin |
| atan() | atan( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/atan |
| atan2() | atan2( <calc-sum>, <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/atan2 |
| attr() | attr( <attr-name> <attr-type>? , <declaration-value>? ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/attr |
| blur() | blur( <length>? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/blur |
| brightness() | brightness( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/brightness |
| calc() | calc( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/calc |
| calc-size() | calc-size( <calc-size-basis>, <calc-sum> ) | CSS Values and Units | experimental | https://developer.mozilla.org/docs/Web/CSS/calc-size |
| circle() | circle( <radial-size>? [ at <position> ]? ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/circle |
| clamp() | clamp( <calc-sum>#{3} ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/clamp |
| color() | color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/color |
| color-mix() | color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2}) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix |
| conic-gradient() | conic-gradient( [ <conic-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient |
| contrast() | contrast( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/contrast |
| cos() | cos( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/cos |
| counter() | counter( <counter-name>, <counter-style>? ) | CSS Lists and Counters | standard | https://developer.mozilla.org/docs/Web/CSS/counter |
| counters() | counters( <counter-name>, <string>, <counter-style>? ) | CSS Lists and Counters | standard | https://developer.mozilla.org/docs/Web/CSS/counters |
| cross-fade() | cross-fade( <cf-mixing-image> , <cf-final-image>? ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/cross-fade |
| cubic-bezier() | cubic-bezier( [ <number [0,1]>, <number> ]#{2} ) | CSS Easing Functions | standard | https://developer.mozilla.org/docs/Web/CSS/easing-function/cubic-bezier |
| drop-shadow() | drop-shadow( [ <color>? && <length>{2,3} ] ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow |
| element() | element( <id-selector> ) | CSS Images | experimental | https://developer.mozilla.org/docs/Web/CSS/element |
| ellipse() | ellipse( <radial-size>? [ at <position> ]? ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/ellipse |
| env() | env( <custom-ident> , <declaration-value>? ) | CSS Environment Variables | standard | https://developer.mozilla.org/docs/Web/CSS/env |
| exp() | exp( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/exp |
| fit-content() | fit-content( <length-percentage [0,∞]> ) | CSS Box Sizing, CSS Grid Layout | standard | https://developer.mozilla.org/docs/Web/CSS/fit-content_function |
| grayscale() | grayscale( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/grayscale |
| hsl() | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) | hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/hsl |
| hsla() | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) | hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) | CSS Color | nonstandard | https://developer.mozilla.org/docs/Web/CSS/color_value/hsl |
| hue-rotate() | hue-rotate( [ <angle> | <zero> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/hue-rotate |
| hwb() | hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/hwb |
| hypot() | hypot( <calc-sum># ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/hypot |
| image() | image( <image-tags>? [ <image-src>? , <color>? ]! ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/image/image |
| image-set() | image-set( <image-set-option># ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/image/image-set |
| inset() | inset( <length-percentage>{1,4} [ round <'border-radius'> ]? ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/inset |
| invert() | invert( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/invert |
| lab() | lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/lab |
| layer() | layer( <layer-name> ) | CSS Cascading and Inheritance | standard | https://developer.mozilla.org/docs/Web/CSS/@import/layer_function |
| lch() | lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/lch |
| leader() | leader( <leader-type> ) | CSS Generated Content | experimental | |
| light-dark() | light-dark( <color>, <color> ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/light-dark |
| linear() | linear( [ <number> && <percentage>{0,2} ]# ) | CSS Easing Functions | standard | https://developer.mozilla.org/docs/Web/CSS/easing-function/linear |
| linear-gradient() | linear-gradient( [ <linear-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/linear-gradient |
| log() | log( <calc-sum>, <calc-sum>? ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/log |
| matrix() | matrix( <number>#{6} ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/matrix |
| matrix3d() | matrix3d( <number>#{16} ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/matrix3d |
| max() | max( <calc-sum># ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/max |
| min() | min( <calc-sum># ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/min |
| minmax() | minmax( [ <length-percentage> | min-content | max-content | auto ] , [ <length-percentage> | <flex> | min-content | max-content | auto ] ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/minmax |
| mod() | mod( <calc-sum>, <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/mod |
| oklab() | oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/oklab |
| oklch() | oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/oklch |
| opacity() | opacity( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/opacity |
| paint() | paint( <ident>, <declaration-value>? ) | CSS Houdini | standard | https://developer.mozilla.org/docs/Web/CSS/image/paint |
| palette-mix() | palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2}) | CSS Fonts | standard | https://developer.mozilla.org/docs/Web/CSS/font-palette/palette-mix |
| path() | path( <'fill-rule'>? , <string> ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/path |
| perspective() | perspective( [ <length [0,∞]> | none ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/perspective |
| polygon() | polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/polygon |
| pow() | pow( <calc-sum>, <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/pow |
| radial-gradient() | radial-gradient( [ <radial-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/radial-gradient |
| ray() | ray( <angle> && <ray-size>? && contain? && [at <position>]? ) | Motion Path | standard | https://developer.mozilla.org/docs/Web/CSS/ray |
| rect() | rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/rect |
| rem() | rem( <calc-sum>, <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/rem |
| repeating-conic-gradient() | repeating-conic-gradient( [ <conic-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/repeating-conic-gradient |
| repeating-linear-gradient() | repeating-linear-gradient( [ <linear-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/repeating-linear-gradient |
| repeating-radial-gradient() | repeating-radial-gradient( [ <radial-gradient-syntax> ] ) | CSS Images | standard | https://developer.mozilla.org/docs/Web/CSS/gradient/repeating-radial-gradient |
| rgb() | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? ) | rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) | CSS Color | standard | https://developer.mozilla.org/docs/Web/CSS/color_value/rgb |
| rgba() | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ) | rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) | CSS Color | nonstandard | https://developer.mozilla.org/docs/Web/CSS/color_value/rgb |
| rotate() | rotate( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate |
| rotate3d() | rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate3d |
| rotateX() | rotateX( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateX |
| rotateY() | rotateY( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateY |
| rotateZ() | rotateZ( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateZ |
| round() | round( <rounding-strategy>?, <calc-sum>, <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/round |
| saturate() | saturate( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/saturate |
| scale() | scale( [ <number> | <percentage> ]#{1,2} ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/scale |
| scale3d() | scale3d( [ <number> | <percentage> ]#{3} ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/scale3d |
| scaleX() | scaleX( [ <number> | <percentage> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleX |
| scaleY() | scaleY( [ <number> | <percentage> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleY |
| scaleZ() | scaleZ( [ <number> | <percentage> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleZ |
| scroll() | scroll( [ <scroller> || <axis> ]? ) | Scroll-driven Animations | experimental | https://developer.mozilla.org/docs/Web/CSS/animation-timeline/scroll |
| sepia() | sepia( [ <number> | <percentage> ]? ) | Filter Effects | standard | https://developer.mozilla.org/docs/Web/CSS/filter-function/sepia |
| sign() | sign( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/sign |
| sin() | sin( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/sin |
| skew() | skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/skew |
| skewX() | skewX( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/skewX |
| skewY() | skewY( [ <angle> | <zero> ] ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/skewY |
| sqrt() | sqrt( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/sqrt |
| steps() | steps( <integer>, <step-position>? ) | CSS Easing Functions | standard | https://developer.mozilla.org/docs/Web/CSS/easing-function/steps |
| symbols() | symbols( <symbols-type>? [ <string> | <image> ]+ ) | CSS Counter Styles | standard | https://developer.mozilla.org/docs/Web/CSS/symbols |
| tan() | tan( <calc-sum> ) | CSS Values and Units | standard | https://developer.mozilla.org/docs/Web/CSS/tan |
| target-counter() | target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? ) | CSS Generated Content | experimental | |
| target-counters() | target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? ) | CSS Generated Content | experimental | |
| target-text() | target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? ) | CSS Generated Content | experimental | |
| translate() | translate( <length-percentage> , <length-percentage>? ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/translate |
| translate3d() | translate3d( <length-percentage> , <length-percentage> , <length> ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/translate3d |
| translateX() | translateX( <length-percentage> ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/translateX |
| translateY() | translateY( <length-percentage> ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/translateY |
| translateZ() | translateZ( <length> ) | CSS Transforms | standard | https://developer.mozilla.org/docs/Web/CSS/transform-function/translateZ |
| var() | var( <custom-property-name> , <declaration-value>? ) | CSS Custom Properties for Cascading Variables | standard | https://developer.mozilla.org/docs/Web/CSS/var |
| view() | view([<axis> || <'view-timeline-inset'>]?) | Scroll-driven Animations | experimental | https://developer.mozilla.org/docs/Web/CSS/animation-timeline/view |
| xywh() | xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? ) | CSS Shapes | standard | https://developer.mozilla.org/docs/Web/CSS/basic-shape/xywh |