---
title: CSS Funktionsnotation
slug: Web/CSS/CSS_Functions
tags:
  - CSS
  - CSS Datentypen
  - CSS Funktion
  - Funktionen
  - Funktionsnotation
  - Referenz
  - Typen
  - datentpen
translation_of: Web/CSS/CSS_Functions
---
<div>{{CSSRef}}</div>

<p>Die CSS-Funktionsnotation ist ein Typ von <a href="/de/docs/Web/CSS/CSS_Values_and_Units">CSS-Werten</a>, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">selector {
  property: functional-notation( [argument]? [, argument]! );
}</pre>

<p>Die Syntax beginnt mit dem <strong>Namen der funktionalen Notation</strong>, gefolgt von einer linken Klammer <code>(</code>. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer <code>)</code> abgeschlossen.</p>

<p>Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern sind sie optional. In einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.</p>

<h2 id="Index">Index</h2>

<p>Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:</p>

<div class="index"><span>A</span>

<ul>
 <li>{{CSSxRef("abs", "abs()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("acos", "acos()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)</li>
 <li>{{CSSxRef("asin", "asin()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("atan", "atan()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("atan2", "atan2()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("attr")}}</li>
</ul>
<span>B</span>

<ul>
 <li>{{CSSxRef("filter-function/blur", "blur()")}} (filter)</li>
 <li>{{CSSxRef("filter-function/brightness", "brightness()")}} (filter)</li>
</ul>
<span>C</span>

<ul>
 <li>{{CSSxRef("calc")}} (math)</li>
 <li>{{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)</li>
 <li>{{CSSxRef("circle", "circle()")}} (shape)</li>
 <li>{{CSSxRef("clamp")}} (math)</li>
 <li>{{CSSxRef("color()")}} (colors) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("conic-gradient")}}</li>
 <li>{{CSSxRef("cos", "cos()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("counter")}}</li>
 <li>{{CSSxRef("counters")}}</li>
 <li>{{CSSxRef("filter-function/contrast", "contrast()")}} (filter)</li>
 <li>{{CSSxRef("cross-fade")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("cubic-bezier", "cubic-bezier()")}}</li>
</ul>
<span>D</span>

<ul>
 <li>{{CSSxRef("device-cmyk", "device-cmyk()")}} (colors) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)</li>
</ul>
<span>E</span>

<ul>
 <li>{{CSSxRef("element")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("env")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("ellipse", "ellipse()")}} (shape)</li>
 <li>{{CSSxRef("exp", "exp()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>F</span>

<ul>
 <li>{{CSSxRef("fit-content()", "fit-content()")}}</li>
 <li>{{CSSxRef("format", "format()")}}</li>
</ul>
<span>G</span>

<ul>
 <li>{{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)</li>
</ul>
<span>H</span>

<ul>
 <li>{{CSSxRef("hsl", "hsl()")}} (colors)</li>
 <li>{{CSSxRef("hsla", "hsla()")}} (colors)</li>
 <li>{{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)</li>
 <li>{{CSSxRef("hwb", "hwb()")}} (colors) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("hypot", "hypot()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>I</span>

<ul>
 <li>{{CSSxRef("imagefunction", "image()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("image-set")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset()")}} (shape)</li>
 <li>{{CSSxRef("filter-function/invert", "invert()")}} (filter)</li>
</ul>
<span>L</span>

<ul>
 <li>{{CSSxRef("lab", "lab()")}} (colors) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("lch", "lch()")}} (colors) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("leader", "leader()")}}</li>
 <li>{{CSSxRef("linear-gradient")}}</li>
 <li>{{CSSxRef("local", "local()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("log", "log()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>M</span>

<ul>
 <li>{{CSSxRef("transform-function/matrix", "matrix()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)</li>
 <li>{{CSSxRef("max")}} (math)</li>
 <li>{{CSSxRef("min")}} (math)</li>
 <li>{{CSSxRef("minmax")}} (math)</li>
 <li>{{CSSxRef("mod", "mod()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>O</span>

<ul>
 <li>{{CSSxRef("filter-function/opacity", "opacity()")}} (filter)</li>
 <li>{{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)</li>
</ul>
<span>P</span>

<ul>
 <li>{{CSSxRef("paint")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("path()", "path()")}} (shape)</li>
 <li>{{CSSxRef("transform-function/perspective", "perspective()")}} (transform)</li>
 <li>{{CSSxRef("polygon", "polygon()")}} (shape)</li>
 <li>{{CSSxRef("pow", "pow()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>R</span>

<ul>
 <li>{{CSSxRef("radial-gradient")}}</li>
 <li>{{CSSxRef("rem", "rem()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("repeat")}}</li>
 <li>{{CSSxRef("repeating-linear-gradient")}}</li>
 <li>{{CSSxRef("repeating-radial-gradient")}}</li>
 <li>{{CSSxRef("repeating-conic-gradient")}}</li>
 <li>rgb() (colors)</li>
 <li>rgba() (colors)</li>
 <li>{{CSSxRef("transform-function/rotate", "rotate()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)</li>
 <li>{{CSSxRef("round", "round()")}} (math) {{Experimental_Inline}}</li>
</ul>
<span>S</span>

<ul>
 <li>{{CSSxRef("filter-function/saturate", "saturate()")}} (filter)</li>
 <li>{{CSSxRef("transform-function/scale", "scale()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)</li>
 <li>{{CSSxRef("filter-function/sepia", "sepia()")}} (filter)</li>
 <li>{{CSSxRef("sign", "sign()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("sin", "sin()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("transform-function/skew", "skew()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/skewX", "skewX()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/skewY", "skewY()")}} (transform)</li>
 <li>{{CSSxRef("sqrt", "sqrt()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("steps", "steps()")}}</li>
 <li>{{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)</li>
 <li>{{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)</li>
 <li>{{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)</li>
 <li>{{CSSxRef("symbols", "symbols()")}}</li>
</ul>
<span>T</span>

<ul>
 <li>{{CSSxRef("tan", "tan()")}} (math) {{Experimental_Inline}}</li>
 <li>{{CSSxRef("target-counter", "target-counter()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("target-counters", "target-counters()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("target-text", "target-text()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("toggle", "toggle()")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("transform-function/translate", "translate()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/translateX", "translateX()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/translateY", "translateY()")}} (transform)</li>
 <li>{{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)</li>
</ul>
<span>U</span>

<ul>
 <li>{{CSSxRef("url()", "url()")}}</li>
</ul>
<span>V</span>

<ul>
 <li>{{CSSxRef("var")}}</li>
</ul>
</div>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Values")}}</td>
   <td>{{Spec2("CSS4 Values")}}</td>
   <td>Hinzugefügte Funktionsnotation <code>toggle()</code>, <code>attr()</code>, <code>calc()</code>, <code>min()</code>, <code>max()</code>, <code>clamp()</code>, <code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>mod()</code>, <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>, <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, <code>exp()</code>, <code>abs()</code> und <code>sign()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td>Fügt die Funktionsnotation <code>calc()</code> zu.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Colors")}}</td>
   <td>{{Spec2("CSS4 Colors")}}</td>
   <td>Fügt kommmalose Syntaxen für die funktionale Notation <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, und <code>hsla()</code> hinzu.<br>
    Erlaubt Alpha-Werte in <code>rgb()</code> und <code>hsl()</code>, und macht <code>rgba()</code> und <code>hsla()</code> into (deprecated) zu (veralteten) Aliasen für diese.<br>
    Fügt die Funktionen <code>hwb()</code>, <code>device-cmyk()</code> und <code>color()</code> hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Colors")}}</td>
   <td>{{Spec2("CSS3 Colors")}}</td>
   <td>Fügt <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> als funktionale Notation hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Images")}}</td>
   <td>{{Spec2("CSS4 Images")}}</td>
   <td>Fügt <code>element()</code>, <code>image()</code>, <code>image-set()</code> und <code>conic-gradient()</code> als Funktionsnotation hinzu.</td>
  </tr>
 </tbody>
</table>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Werte und Einheiten</a></li>
 <li><a href="/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten">Einführung zu CSS: Werte und Einheiten</a></li>
</ul>