CSS Functions Reference

What are CSS Functions?

CSS Functions are built-in functions that generate values for CSS properties. They allow you to perform calculations, create colors, transform elements, apply gradients, load images, and much more. Instead of entering fixed values, CSS functions make styles more flexible, reusable, and responsive.

Why Use CSS Functions?

CSS functions simplify stylesheet development by reducing repetitive code. They help create responsive layouts, dynamic colors, animations, image effects, and flexible sizing without using JavaScript.

Common CSS Functions

calc()

Perform calculations

width:calc(100% – 50px);

rgb()

RGB color values

color:rgb(255,0,0);

rgba()

RGB with transparency

rgba(0,0,255,.5)

hsl()

HSL color values

hsl(120,100%,50%)

url()

Load resources

background:url(image.jpg);

linear-gradient()

Gradient background

background:linear-gradient(red,blue);

translate()

Move an element

transform:translate(50px);

rotate()

Rotate an element

transform:rotate(45deg);

Step 1: Use calc()

The calc() function performs mathematical calculations using CSS values.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

width:calc(100% - 100px);

padding:20px;

background:#007BFF;

color:white;

}

</style>

</head>

<body>

<div class="box">

Using calc()

</div>

</body>

</html>

Step 2: Use rgb() and rgba()

The rgb() function creates colors using red, green, and blue values. The rgba() function also includes an alpha value for transparency.

<!DOCTYPE html>
<html>

<head>

<style>

.rgb{

background:rgb(255,0,0);

color:white;

padding:20px;

margin-bottom:10px;

}

.rgba{

background:rgba(0,0,255,0.5);

padding:20px;

}

</style>

</head>

<body>

<div class="rgb">

RGB Color

</div>

<div class="rgba">

RGBA Color

</div>

</body>

</html>

Step 3: Use linear-gradient()

The linear-gradient() function creates smooth color transitions without using images.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

height:150px;

background:linear-gradient(to right,#ff512f,#dd2476);

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

Step 4: Use url()

The url() function loads images, fonts, and other external resources.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

height:220px;

background:url("https://picsum.photos/600/300");

background-size:cover;

background-position:center;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

Step 5: Use translate() and rotate()

Transform functions change the position and rotation of HTML elements.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

width:120px;

height:120px;

background:#28a745;

transform:translate(40px,20px) rotate(20deg);

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

Complete CSS Functions Example

<!DOCTYPE html>
<html>

<head>

<style>

body{

font-family:Arial;

text-align:center;

}

.card{

width:calc(100% - 120px);

max-width:450px;

margin:30px auto;

padding:30px;

background:linear-gradient(135deg,#00c6ff,#0072ff);

color:white;

transform:rotate(-2deg);

border-radius:10px;

}

</style>

</head>

<body>

<div class="card">

Welcome to CSS Functions

</div>

</body>

</html>

Advantages of CSS Functions

Dynamic Values

Flexible Design

Calculates values automatically.

Modern Styling

Professional UI

Creates gradients, transforms, and advanced effects.

Responsive

Better Layouts

Works well with responsive designs.

Less Code

Easy Maintenance

Reduces repetitive CSS values.

Best Practices

Use calc() for flexible and responsive sizing.
Prefer CSS gradients instead of image backgrounds when possible.
Use rgba() or hsla() for transparent colors.
Combine transform functions inside a single transform property.
Use descriptive and readable values.
Always check the syntax of CSS functions carefully.
Test CSS functions across modern browsers.
Use CSS functions to reduce repetitive code and improve maintainability.

Web Resources on CSS Functions

1. MDN Web Docs : @function CSS at-rule
2. Web.dev : Functions
3. CSS Tricks.com : Functions in CSS?!
4. MDN Web Docs : CSS value functions

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.