René's URL Explorer Experiment


Title: Functions  |  web.dev

Open Graph Title: Functions  |  web.dev

Description: CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.

Open Graph Description: CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.

Opengraph URL: https://web.dev/learn/css/functions

X: @ChromiumDev

direct link

Domain: web.dev

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:imagehttps://web.dev/static/images/social-wide.jpg
og:image:width1200
og:image:height675
og:localeen
twitter:cardsummary
twitter:imagehttps://web.dev/static/images/social-wide.jpg

Links:

Skip to main content https://web.dev/learn/css/functions#main-content
https://web.dev/
Resources https://web.dev/learn
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
https://web.dev/
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Welcome to Learn CSS!https://web.dev/learn/css/welcome
Box Modelhttps://web.dev/learn/css/box-model
Selectorshttps://web.dev/learn/css/selectors
Nestinghttps://web.dev/learn/css/nesting
The cascadehttps://web.dev/learn/css/the-cascade
Specificityhttps://web.dev/learn/css/specificity
Inheritancehttps://web.dev/learn/css/inheritance
Colorhttps://web.dev/learn/css/color
Sizing Unitshttps://web.dev/learn/css/sizing
Layouthttps://web.dev/learn/css/layout
Flexboxhttps://web.dev/learn/css/flexbox
Gridhttps://web.dev/learn/css/grid
Logical Propertieshttps://web.dev/learn/css/logical-properties
Custom Propertieshttps://web.dev/learn/css/custom-properties
Spacinghttps://web.dev/learn/css/spacing
Pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Pseudo-classeshttps://web.dev/learn/css/pseudo-classes
Bordershttps://web.dev/learn/css/borders
Shadowshttps://web.dev/learn/css/shadows
Focushttps://web.dev/learn/css/focus
Cursors and pointershttps://web.dev/learn/css/cursors-and-pointers
Z-index and stacking contextshttps://web.dev/learn/css/z-index
Anchor positioninghttps://web.dev/learn/css/anchor-positioning
Popover and dialoghttps://web.dev/learn/css/popover-and-dialog
Functionshttps://web.dev/learn/css/functions
Paths, shapes, clipping, and maskinghttps://web.dev/learn/css/paths-shapes-clipping-masking
Gradientshttps://web.dev/learn/css/gradients
Animationshttps://web.dev/learn/css/animations
Filtershttps://web.dev/learn/css/filters
Blend Modeshttps://web.dev/learn/css/blend-modes
Listshttps://web.dev/learn/css/lists
Countershttps://web.dev/learn/css/counters
Transitionshttps://web.dev/learn/css/transitions
View Transitions for SPAshttps://web.dev/learn/css/view-transitions-spas
Overflowhttps://web.dev/learn/css/overflow
Backgroundshttps://web.dev/learn/css/backgrounds
Text and typographyhttps://web.dev/learn/css/typography
Container querieshttps://web.dev/learn/css/container-queries
Conclusion and next stepshttps://web.dev/learn/css/conclusion
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
web.dev https://web.dev/
Resources https://web.dev/learn
CSS https://web.dev/learn/css
The CSS Podcast - 020: Functions https://thecsspodcast.libsyn.com/020-functions
gridhttps://web.dev/learn/css/grid
colorhttps://web.dev/learn/css/color
CSS has a lot of built-in functionshttps://developer.mozilla.org/docs/Web/CSS/CSS_Functions
pseudo-classes modulehttps://web.dev/learn/css/pseudo-classes
:is()https://developer.mozilla.org/docs/Web/CSS/:is
:not()https://developer.mozilla.org/docs/Web/CSS/:not
Custom properties are also affected by the cascadehttps://piccalil.li/tutorial/getting-started-with-css-custom-properties/
var()https://developer.mozilla.org/docs/Web/CSS/var()
attr()https://developer.mozilla.org/docs/Web/CSS/attr()
url()https://developer.mozilla.org/docs/Web/CSS/url()
colorhttps://web.dev/learn/css/color
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/calc
calc()https://developer.mozilla.org/docs/Web/CSS/calc()
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/min
min()https://developer.mozilla.org/docs/Web/CSS/min()
max()https://developer.mozilla.org/docs/Web/CSS/max()
sizinghttps://web.dev/learn/css/sizing
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/clamp
clamp()https://developer.mozilla.org/docs/Web/CSS/clamp()
this article on these functionshttps://web.dev/articles/min-max-clamp
article on trigonometric functionshttps://web.dev/articles/css-trig-functions
custom propertyhttps://web.dev/blog/at-property-baseline
ehttps://en.wikipedia.org/wiki/E_(mathematical_constant)
logarithmhttps://en.wikipedia.org/wiki/Logarithm
natural logarithmhttps://en.wikipedia.org/wiki/Natural_logarithm
clip-pathhttps://developer.mozilla.org/docs/Web/CSS/clip-path
offset-pathhttps://developer.mozilla.org/docs/Web/CSS/offset-path
shape-outsidehttps://developer.mozilla.org/docs/Web/CSS/shape-outside
circle()https://developer.mozilla.org/docs/Web/CSS/basic-shape/circle()
ellipse()https://developer.mozilla.org/docs/Web/CSS/basic-shape/ellipse()
inset()https://developer.mozilla.org/docs/Web/CSS/basic-shape/inset()
polygon()https://developer.mozilla.org/docs/Web/CSS/basic-shape/polygon()
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/transform-function/rotate
rotate()https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate()
rotateX()https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateX()
rotateY()https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateY()
rotateZ()https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateZ()
rotate3d()https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate3d()
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/transform-function/rotate3d
rotatehttps://developer.mozilla.org/docs/Web/CSS/rotate
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/transform-function/scale
scale()https://developer.mozilla.org/docs/Web/CSS/transform-function/scale()
scaleX()https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleX()
scaleY()https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleY()
scaleZ()https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleZ()
scale3d()https://developer.mozilla.org/docs/Web/CSS/transform-function/scale3d()
scalehttps://developer.mozilla.org/docs/Web/CSS/scale
transitionhttps://web.dev/learn/css/functions/TODO
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/transform-function/translate
translate()https://developer.mozilla.org/docs/Web/CSS/transform-function/translate()
translateXhttps://developer.mozilla.org/docs/Web/CSS/transform-function/translateX()
translateYhttps://developer.mozilla.org/docs/Web/CSS/transform-function/translateY()
translateZhttps://developer.mozilla.org/docs/Web/CSS/transform-function/translateZ()
translate3dhttps://developer.mozilla.org/docs/Web/CSS/transform-function/translate3d()
translatehttps://developer.mozilla.org/docs/Web/CSS/translate
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Values/transform-function/skew
skew()https://developer.mozilla.org/docs/Web/CSS/transform-function/skew()
skewXhttps://developer.mozilla.org/docs/Web/CSS/transform-function/skewX()
skewYhttps://developer.mozilla.org/docs/Web/CSS/transform-function/skewY()
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/perspective
perspectivehttps://developer.mozilla.org/docs/Web/CSS/perspective
animatehttps://web.dev/learn/css/animations
gradientshttps://web.dev/learn/css/gradients
filtershttps://web.dev/learn/css/filters
Previous arrow_back Popover and dialog https://web.dev/learn/css/popover-and-dialog
Next Paths, shapes, clipping, and masking arrow_forward https://web.dev/learn/css/paths-shapes-clipping-masking
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/learn/css/functions

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.