CssHow-ToBeginner · 3 min read

How to Use Sepia Filter in CSS: Simple Guide

Use the filter property in CSS with the sepia() function to apply a sepia tone to images or elements. For example, filter: sepia(100%); adds a full sepia effect, while lower percentages create a lighter effect.

📐

Syntax

The filter property applies graphical effects like blur or color shifts to elements. The sepia() function inside filter adds a warm brown tone, mimicking old photographs.

sepia(percentage): Controls the strength of the sepia effect from 0% (no effect) to 100% (full sepia).

css

selector {
  filter: sepia(percentage);
}

💻

Example

This example shows an image with a full sepia filter applied, turning it into a warm brown tone.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sepia Filter Example</title>
<style>
  img {
    width: 300px;
    filter: sepia(100%);
    display: block;
    margin: 20px auto;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <img src="https://via.placeholder.com/300x200.png?text=Original+Image" alt="Example Image">
</body>
</html>

Output

A 300x200 pixel image displayed in the center of the page with a warm brown sepia tone applied, rounded corners, and no other effects.

⚠️

Common Pitfalls

Common mistakes when using the sepia filter include:

Forgetting to use the filter property and trying to use sepia() alone.
Using values outside the 0% to 100% range, which may be ignored or cause no effect.
Not testing on different browsers; some older browsers may need prefixes or have limited support.

Always check your filter values and test visually.

css

/* Wrong: sepia() used alone */
img {
  /* sepia(100%); This does nothing */
}

/* Right: use filter property */
img {
  filter: sepia(100%);
}

📊

Quick Reference

Summary tips for using the sepia filter:

Use filter: sepia(0%); for no effect and sepia(100%); for full sepia.
You can combine sepia with other filters like blur() or brightness() by separating them with spaces.
Works on images, backgrounds, and other HTML elements.
Supports smooth transitions with CSS animations or transition.

✅

Key Takeaways

Use the CSS property filter: sepia(percentage); to add a sepia tone.

The percentage controls the strength from 0% (none) to 100% (full).

Always use the full filter property, not just sepia() alone.

Test your sepia effect on different browsers for compatibility.

You can combine sepia with other CSS filters for creative effects.