CSS Functions Reference

Master CSS functions with practical examples you can copy and use.
From calc() and clamp() to gradients and transforms.

Quick Navigation

calc()

Math Functions

calc(expression)

Performs mathematical calculations to determine CSS property values. Supports +, -, *, / operators and can mix units (px, %, rem, etc).

Responsive Width

Calculate width based on viewport minus fixed margins

.container {
  width: calc(100% - 40px);
  margin: 0 auto;
}

Fluid Typography

Mix different units for flexible font sizing

Responsive Heading

.heading {
  font-size: calc(1.5rem + 2vw);
  line-height: 1.2;
}

Complex Calculations

Nested calculations with multiple operations

.grid-item {
  width: calc((100% - 60px) / 4);
  margin-right: 20px;
}

clamp()

Math Functions

clamp(min, preferred, max)

Clamps a value between a minimum and maximum. Takes three parameters: minimum value, preferred value, and maximum value. Perfect for responsive design.

Browser Support: Chrome 79+, Firefox 75+, Safari 13.1+

Responsive Font Size

Font scales between 1rem and 3rem based on viewport

Responsive Title

.title {
  font-size: clamp(1rem, 5vw, 3rem);
}

Fluid Container Width

Container grows with viewport but stays within bounds

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

Responsive Spacing

Padding adjusts smoothly across screen sizes

.card {
  padding: clamp(1rem, 2vw + 0.5rem, 3rem);
}

min()

Math Functions

min(value1, value2, ...)

Returns the smallest value from a comma-separated list of expressions. Useful for setting maximum constraints.

Maximum Width Constraint

Width never exceeds 600px even if 90% is larger

.box {
  width: min(90%, 600px);
}

Responsive Images

Image scales down but never larger than original size

img {
  width: min(100%, 800px);
  height: auto;
}

Grid Column Size

Columns adapt but don't exceed maximum

.grid {
  grid-template-columns: repeat(auto-fit, min(250px, 100%));
}

max()

Math Functions

max(value1, value2, ...)

Returns the largest value from a comma-separated list of expressions. Useful for setting minimum constraints.

Minimum Width Guarantee

Width is at least 200px even on small screens

.sidebar {
  width: max(200px, 20%);
}

Minimum Font Size

Text never gets smaller than 14px

.body-text {
  font-size: max(14px, 1vw);
}

Touch Target Size

Ensure buttons meet minimum touch target size

button {
  min-width: max(44px, 100%);
  min-height: 44px;
}

var()

Custom Properties

var(--custom-property, fallback)

References a CSS custom property (variable). Can provide a fallback value if the property is not defined.

CSS Variables

Define and use custom properties for reusable values

:root {
  --primary-color: #3b82f6;
  --spacing-unit: 8px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing-unit);
}

Fallback Values

Provide default if variable is undefined

.card {
  background: var(--card-bg, white);
  color: var(--text-color, black);
}

Theme Variables

Create themeable components with CSS variables

:root {
  --bg-primary: white;
  --text-primary: black;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: white;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

rgb() / rgba()

Color Functions

rgb(red, green, blue) / rgba(red, green, blue, alpha)

Define colors using Red, Green, Blue values (0-255) with optional alpha transparency (0-1).

RGB Color

Define color with red, green, blue values

rgb(59, 130, 246)

.box {
  background: rgb(59, 130, 246);
  color: rgb(255, 255, 255);
}

RGBA with Transparency

Add alpha channel for semi-transparent colors

50% Black Overlay

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

.button {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.5);
}

Modern Space-Separated Syntax

CSS Color Module Level 4 syntax

.modern {
  background: rgb(59 130 246 / 0.5);
  /* Same as rgba(59, 130, 246, 0.5) */
}

hsl() / hsla()

Color Functions

hsl(hue, saturation, lightness) / hsla(hue, saturation, lightness, alpha)

Define colors using Hue (0-360°), Saturation (0-100%), Lightness (0-100%) with optional alpha. More intuitive than RGB for color adjustments.

HSL Color

Define color with hue, saturation, lightness

hsl(217, 91%, 60%)

.primary {
  background: hsl(217, 91%, 60%);
  /* Same blue as rgb(59, 130, 246) */
}

Color Variations

Easy to create color shades by adjusting lightness

.color-scale {
  --base-hue: 217;
  --base-sat: 91%;
}

.light { background: hsl(var(--base-hue), var(--base-sat), 90%); }
.base { background: hsl(var(--base-hue), var(--base-sat), 60%); }
.dark { background: hsl(var(--base-hue), var(--base-sat), 30%); }

HSLA with Transparency

Add alpha for semi-transparent HSL colors

.button {
  background: hsla(217, 91%, 60%, 0.1);
  border: 1px solid hsla(217, 91%, 60%, 0.5);
}

url()

Resource Functions

url(path)

References external resources like images, fonts, or files. Path can be relative, absolute, or data URI.

Background Image

Load image as background

.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
}

Multiple Backgrounds

Layer multiple images or gradients

.card {
  background:
    url('/pattern.png'),
    linear-gradient(to bottom, white, #f0f0f0);
  background-size: 10px 10px, cover;
}

Custom Fonts

Load web fonts from files

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('/fonts/custom.woff') format('woff');
}

linear-gradient()

Gradient Functions

linear-gradient(direction, color-stop1, color-stop2, ...)

Creates a linear gradient image transitioning between two or more colors along a straight line.

Simple Gradient

Two-color gradient from top to bottom

.box {
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
}

Diagonal Gradient

Gradient at 45-degree angle with multiple stops

.card {
  background: linear-gradient(
    45deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );
}

Color Stops

Control where colors start and stop

.button {
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 50%,
    #10b981 50%,
    #10b981 100%
  );
}

radial-gradient()

Gradient Functions

radial-gradient(shape size at position, color-stop1, color-stop2, ...)

Creates a radial gradient image transitioning from a center point outward. Can be circular or elliptical.

Circular Gradient

Gradient radiating from center

.spotlight {
  background: radial-gradient(
    circle,
    #3b82f6,
    #1e40af
  );
}

Positioned Gradient

Control the center position of the gradient

.hero {
  background: radial-gradient(
    circle at top right,
    #667eea 0%,
    transparent 50%
  );
}

Elliptical Shape

Create elliptical gradient with size control

.card {
  background: radial-gradient(
    ellipse 100% 50% at center,
    white,
    #f0f0f0
  );
}

translate()

Transform Functions

translate(x, y) / translateX(x) / translateY(y)

Moves an element from its current position on the X and/or Y axis. Does not affect document flow.

2D Translation

Move element horizontally and vertically

.box {
  transform: translate(50px, 20px);
}

Perfect Centering

Center element with absolute positioning

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Single Axis

Move only horizontally or vertically

.slide-in {
  transform: translateX(100%);
  transition: transform 0.3s;
}

.slide-in.active {
  transform: translateX(0);
}

rotate()

Transform Functions

rotate(angle)

Rotates an element around a fixed point (default is center). Angle specified in deg, rad, grad, or turn.

Rotation

Rotate element by degrees

.icon {
  transform: rotate(45deg);
}

Animated Spinner

Create loading spinner with rotation

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Custom Origin

Change rotation point

.door {
  transform: rotate(90deg);
  transform-origin: left center;
}

scale()

Transform Functions

scale(x, y) / scaleX(x) / scaleY(y)

Resizes an element on the X and/or Y axis. Value of 1 is original size, < 1 shrinks, > 1 enlarges.

Uniform Scale

Scale element proportionally

.button:hover {
  transform: scale(1.1);
  transition: transform 0.2s;
}

Non-uniform Scale

Scale X and Y axes differently

.stretch {
  transform: scale(1.5, 0.8);
}

Single Axis

Scale only width or height

.expand-width {
  transform: scaleX(2);
}

.squash-height {
  transform: scaleY(0.5);
}

CSS Functions Best Practices

Use calc() for Dynamic Spacing

calc() is perfect for responsive layouts where you need to mix units. Use it for containers, spacing, and positioning that adapts to different screen sizes.

Prefer clamp() for Fluid Typography

clamp() provides better control than media queries for responsive text. Set minimum and maximum sizes to ensure readability across all devices.

Use CSS Variables with Functions

Combine var() with calc(), min(), max() for powerful theming systems. Define base values as variables and calculate variations dynamically.

HSL for Color Systems

hsl() makes it easier to create color scales and themes. Keep hue and saturation constant, vary lightness for consistent color families.

Combine Transform Functions

Multiple transform functions can be chained: transform: translate(-50%, -50%) rotate(45deg) scale(1.2);. Order matters - they're applied right to left.

Performance Considerations

transform and opacity are GPU-accelerated. For animations, prefer these over properties that trigger layout recalculation (width, height, top, left).

See any CSS function in action on real websites

Frontend Hero's CSS Scanner shows you all styles including calc(), clamp(), gradients, transforms, and custom properties. Inspect any element and see exactly how developers use these functions in production.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →