Free · Fast · Privacy-first

CSS Sepia Filter Generator

The filter: sepia() function applies a warm, brownish yellow tone to an element that mimics the aged appearance of sepia toned photographs from early photographic processes.

⚡

Live preview of sepia() from warm tint to full vintage tone

🔒

Combine sepia with brightness and contrast for retro photo stacks

✨

Preview partial sepia for warm colour palettes

⚡

Copy the complete filter stack with one click

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Filter Effects Builder to your website

Drop the Filter Effects Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Filter Effects Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Filter Effects Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Sepia Tone Mechanics, Warm Partial Values, and Vintage Photo Filter Stacks

The sepia() function converts element pixel colours using a fixed matrix that maps them toward a warm brownish yellow tone derived from the W3C Filter Effects Level 1 specification. At sepia(1), the transformation is complete: all colours become variations of a single warm brown hue, and the result looks broadly similar regardless of the original image colours because chromatic information is overwritten by the sepia matrix while only the original luminance survives to determine which sepia shade each pixel receives. At sepia(0), the element is unchanged. At sepia(0.4), the original colours remain partially visible but with a warm cast layered over them, reducing the blue and cyan components while lifting the red and yellow channels in a controlled, mathematically predictable way that is identical across every modern browser engine.

Combining sepia() with brightness() and contrast() produces recognisable vintage photographic styles that would otherwise require dedicated photo editing software to reproduce. The faded print look sepia(0.5) brightness(1.1) contrast(0.85) adds warmth while lifting overall exposure and slightly reducing contrast, mimicking a print that has been left in light for years. The darkroom developed look sepia(0.8) brightness(0.95) contrast(1.1) is richer and more saturated in the brown tones, similar in feel to a freshly developed darkroom print on warm paper. The hand tinted look sepia(0.3) saturate(0.8) brightness(1.05) preserves enough original colour for the image to read as slightly desaturated and warm rather than fully monochromatic. Each of these requires tuning multiple values simultaneously, which is the primary benefit of the visual builder over hand editing CSS.

Partial sepia values between 0.1 and 0.4 are useful as a subtle warm cast for photographs on warm themed websites without the full vintage effect. A travel blog or lifestyle site might apply sepia(0.15) to all photography as a consistent warm treatment that ties images together visually across content from many contributors. This approach is less processing intensive than running all images through photo editing software and is easy to remove or adjust by changing a single CSS rule in the shared stylesheet. For UI components like icons or illustrations, full sepia(1) combined with brightness() adjustments can recolour monochromatic black or white assets to a warm amber tone that fits brand palettes built around earth tones, copper, rust, and aged paper colours without needing duplicate asset variants per palette.

Sepia interacts with other filter functions in order dependent ways that matter when building complex stacks. Placing sepia() before saturate() in the filter list applies sepia first and then reduces the saturation of the already brown toned pixels, producing a muted brown image. Placing saturate() before sepia() desaturates the original colours first and then applies sepia to the desaturated result, which produces a slightly different brown distribution because the sepia matrix receives lower chroma input. The visual builder lets you reorder functions by drag and compare both renderings side by side, which is significantly faster than rewriting the order in CSS and reloading the page. For most vintage looks, the order brightness, contrast, sepia, saturate produces consistent results across diverse photographic source content.

MDN: sepia()W3C Filter Effects Module Level 1

How to use this tool

💡

Drag the sepia slider from 0 toward 1 to add warm brown tones. Add brightness(1.05) and contrast(0.9) to the stack for a classic faded-vintage look. Adjust each value individually until the combination produces the retro aesthetic you want.

How It Works

Step-by-step guide to css sepia filter generator:

1
Add sepia() to the filter builder
Select the sepia function from the function panel using the Add Filter dropdown. The preview begins at value 0 with the element rendering in its original colours. Drag the slider rightward to apply warm brown toning and observe the smooth transition from full original colour through partial sepia and into the full monochromatic brown rendering as the value approaches 1.
2
Set the sepia intensity
Choose a value between 0.1 and 0.4 for a subtle warm cast that retains original colour identity, 0.5 to 0.7 for a clearly vintage look that still preserves some original chroma, or 1 for full sepia monochrome where every pixel adopts a variation of the warm brown matrix output. Type an exact decimal in the field if you have a precise target.
3
Add brightness and contrast to the stack
For a faded vintage look, add brightness(1.1) and contrast(0.85) to the filter stack alongside sepia. For a rich darkroom developed look, add brightness(0.95) and contrast(1.1). Adjust each function independently in the preview to find the combined feel you want, and reorder the stack by drag to compare different processing orders.
4
Copy and paste the filter stack
Click Copy CSS to grab the complete filter declaration with every stacked function in the current order. Paste it into your stylesheet on the target element or component class. Pair with transition: filter 0.4s ease in the base rule so any hover or class toggle that changes the filter value animates smoothly rather than snapping between states abruptly.

Real-world examples

Common situations where this approach makes a real difference:

Travel blog consistent warm photography treatment

A travel blog receives photography from multiple contributors with varied white balance and colour temperature, ranging from cool overcast scenes to warm tropical sunsets. A developer applies filter: sepia(0.18) brightness(1.03) to all article images via a shared .post-image class. The subtle sepia and slight brightness lift ties images together visually with a warm, sun soaked aesthetic that matches the brand without making any image look overly processed or stuck in a vintage mood. The generator confirms the chosen values look correct across a representative sample of real submissions before the rule is rolled out to the production stylesheet.

Vintage-style landing page hero image

A heritage food brand wants their hero photography to look like vintage recipe card photographs from the 1970s with a warm faded character that supports the brand storytelling. A developer uses the generator to build filter: sepia(0.7) brightness(1.08) contrast(0.88) saturate(0.9) on the .hero-img class. The combination produces a warm, slightly faded, muted look that reads as authentically vintage without straying into pastiche territory or making product details unreadable. The generator speeds up finding these four values by previewing them interactively against the actual hero photograph and adjacent supporting imagery in the landing page composition.

Hover de-sepia reveal on archival image grid

A historical archive website shows document scans and old photographs with filter: sepia(1) at rest to match the visual context of historical content and unify the gallery look across heterogeneous source material. On hover, the filter transitions to sepia(0) over 0.4s ease, revealing the original scan colours which include faded ink, paper tones, and the actual condition of the historical material. The transition communicates to visitors that the original document is preserved in full colour and that the sepia treatment is purely a presentation choice. The builder helps the developer pick a hover duration that feels deliberate and respectful rather than flashy.

Icon recolouring to brand amber using sepia and brightness

A developer uses a set of free black SVG icons that need to match a brand palette built around amber and warm earth tones for a new product launch. Rather than recreating each icon in a different colour by hand or commissioning a design refresh, they apply filter: sepia(1) brightness(0.82) hue-rotate(5deg) to the shared .icon class. The combination converts black to a specific warm amber that matches the brand colour reference closely enough to use in production. The generator previews the combination and the developer iterates the brightness and hue-rotate values until the rendered amber matches the Figma colour swatch on screen, finalising the rule in minutes.

Pro tips

Get better results with these expert suggestions:

sepia() cannot target specific colour ranges

The sepia() function applies a fixed matrix to all pixels uniformly with no awareness of luminance regions or local image content. Unlike photo editing tools that can apply warm tones selectively to shadows or highlights through tonal curves or masking, CSS sepia() affects every pixel equally and cannot be limited to a specific luminance band. For selective tonal adjustments, SVG feColorMatrix filters or CSS gradient overlays with blend modes offer more control at the cost of added complexity and an extra DOM node. The simplicity of sepia() is its strength for whole image treatments, and it is rarely worth swapping it for SVG primitives unless the design specifically requires region targeted toning.

Layer sepia with a linear-gradient overlay for split toning

To create a split tone look with warm shadows and cooler highlights, apply filter: sepia(0.6) to the image and then place a linear gradient from rgba(100,80,200,0.2) to rgba(255,200,100,0.2) as an absolutely positioned overlay with mix-blend-mode: screen. The gradient overlay adds cool tones to lighter areas and warm tones to darker areas, producing a split tone effect that CSS filter alone cannot achieve because filter functions operate uniformly across the entire pixel buffer. This combination is popular in cinematic colour grading references and works well for hero photography that needs a distinctive editorial style without resorting to per image processing in a photo editor.

Test sepia on both warm and cool source images

Sepia applied to a photograph with cool blue tones produces a noticeably different result than sepia on a warm sunset photograph even though both end up warm brown, because the transition from the original cool palette to warm is more dramatic and tends to flatten more detail. Preview your sepia filter on the full range of actual images in your content library, not just a single test image, to confirm the effect reads consistently across the variety of source material your CMS publishes. Pay particular attention to portraits and skin tones, which respond differently to sepia than landscape or product imagery and can look unflattering at higher intensities.

Use sepia(1) plus brightness to recolour white UI elements to cream or amber

A white background element with filter: sepia(1) brightness(1.1) becomes a warm cream that suits parchment style backgrounds. brightness(0.85) produces a medium amber suitable for badges, callout panels, or hero overlays. This technique converts white filled SVG or HTML elements to warm tones for designs using earth tone palettes without creating separate coloured asset variants per palette swatch, and it scales to large icon sets where producing variants by hand would be tedious. The values are easy to tune in the FixTools builder before committing them to the production stylesheet.

Use partial sepia for a consistent warm site palette

Applying filter: sepia(0.15) to all images on a warm-branded site ties photography together with a subtle warm cast. The value is low enough that original colours remain clearly visible while the warmth reads as an intentional stylistic choice rather than a processing artefact.

Add hue-rotate(5deg) to shift sepia warmth

The sepia tone matrix produces a fixed warm brown. Adding hue-rotate(5deg) to the filter stack shifts the brown slightly warmer (red direction) or hue-rotate(-10deg) shifts it cooler. This lets you adjust the sepia tone away from its default colour when it conflicts with your brand palette.

Combine sepia(1) with a specific brightness for icon recolouring

To recolour a black SVG icon to a warm amber tone, apply filter: sepia(1) brightness(0.8). The sepia converts the black to dark brown and the brightness reduction pushes it toward a deeper amber. Adjust brightness between 0.6 and 1.1 to target different amber tones.

FAQ

Frequently asked questions

sepia(1) applies a fixed colour matrix defined in the CSS Filter Effects Level 1 specification that converts all pixel colours to warm brownish yellow tones derived from the original luminance of each pixel. The exact output colour depends on the input luminance: dark pixels become dark brown approaching near black, midtones become a medium amber brown, and highlights become warm cream sitting between yellow and beige. The specific matrix values are published openly in the W3C specification document and produce a consistent output regardless of the browser, operating system, GPU vendor, or colour profile rendering the filter, which makes sepia() one of the most cross browser predictable filter functions in production use today across both desktop and mobile rendering environments.

Not within the sepia() function itself, because the colour matrix is fixed by the specification and offers no tunable parameters beyond intensity. To adjust the warmth direction in CSS, add hue-rotate() to the filter stack after sepia(): a small positive value shifts the sepia tone warmer toward red, and a small negative value shifts it cooler toward yellow green. hue-rotate(10deg) alongside sepia(1) produces a noticeably warmer, redder brown than the default sepia tone. To further tune the saturation of the sepia output, add saturate() with a value between 0.7 and 1.3 to mute or intensify the brown. Stacking these three functions gives reasonable control over the warm tone without leaving CSS for SVG feColorMatrix solutions.

Yes. Like all CSS filter functions, sepia() applies to the entire rendered output of the element including text, borders, backgrounds, child elements, and any embedded raster or vector images present in the subtree. Text rendered through a sepia(1) filter appears in a brownish colour derived from the original text colour luminance, which can affect readability if the contrast ratio drops below WCAG thresholds. If you need sepia to affect only background images without changing text colour, apply the filter to the background element separately from the content container, typically by placing the image in a pseudo element or absolutely positioned child that does not contain the typography. This pattern keeps text crisp while still applying the warm treatment to the imagery layer beneath.

A reliable faded vintage combination is filter: sepia(0.5) brightness(1.08) contrast(0.85). The sepia adds warm brown tones across the entire image, the brightness increase lifts the overall exposure as if the print has been in light over many years, and the contrast reduction flattens the tonal range to match how aged photographs lose shadow depth over time. Adjust these three values together in the visual builder to tune the effect for your specific source images, and consider adding a low value saturate(0.85) to drain a little colour for a deeper period feel. Test the combination on both portrait and landscape photos because faces respond differently to vintage stacks than scenery, especially with skin tone preservation in mind.

Yes. sepia() interpolates smoothly in CSS transitions and @keyframes animations as part of the filter property value. A common pattern is transitioning from sepia(1) to sepia(0) on hover over 0.3s to 0.5s, revealing the full colour image in a satisfying reveal. Ensure both states list the same filter function types in the same order for reliable cross browser interpolation, otherwise the browser may snap between values rather than animating because there is no defined mapping between mismatched function lists. Animating sepia is inexpensive compared to blur() because it does not require multi sample pixel processing, which makes it safe to use across grids of dozens of thumbnails on modest hardware without dropping frames during the transition.

Partially. The sepia() function produces a fixed warm brown tone that may not match a specific brand colour precisely on its own. For a closer match, combine sepia(1) with brightness() to adjust luminance, hue-rotate() to shift the hue toward or away from red, and saturate() to control how vivid the resulting brown reads. If the brand colour requires more precise saturation control, add saturate() with a value between 0.7 and 1.3 to the stack. For exact colour matching down to specific hex values, an SVG feColorMatrix filter with custom matrix values gives more precise control than CSS sepia(), at the cost of additional markup. For most brand palettes in earthy or warm territory, the three function CSS combination is close enough and far simpler to maintain than an SVG approach.

The sepia() function is a matrix transformation applied per pixel, similar in cost to grayscale() and hue-rotate(). It is inexpensive for static elements because the browser computes it once and caches the result until the element or its filter value changes. Animating sepia triggers recalculation on each animation frame, though modern browsers commonly promote animating filtered elements to a GPU compositor layer where the per pixel cost is borne by the GPU rather than the main thread. For hover transitions on a small number of elements, performance is not a concern on any modern device. Animating sepia continuously on many large elements simultaneously can cause frame drops on older hardware, so prefer triggering sepia transitions on user input rather than running them in idle loops.

filter: sepia() applies a precise colour matrix transformation directly to the actual pixel values of the element using a fixed mathematical formula defined in the specification. A colour overlay, such as a semi transparent amber pseudo element using mix-blend-mode: multiply, blends an overlay colour with the element using a compositing algorithm that depends on the blend mode chosen. The results look superficially similar but differ in shadow handling: sepia() converts dark pixels to warm dark brown while preserving image structure, while a multiply blend darkens the overlay colour in proportion to the element luminance and can crush shadow detail. The filter approach is simpler to apply, does not require additional HTML or pseudo elements, and is easier to animate as a single property than a separate overlay layer.

Not directly within a single rule, because sepia() applies to the element and its contents while backdrop-filter applies to the visible content behind the element through its translucent background. You can however achieve a warm glass effect by placing sepia() in the backdrop-filter property: backdrop-filter: sepia(0.3) blur(8px) applies a warm cast to whatever sits behind the translucent panel along with the blur. The panel contents themselves are unaffected. This pattern is useful for vintage styled overlays on photographic backgrounds where the through panel content should pick up the warm aged feel of the page while the panel text remains crisp and clearly legible.

Use filter: none to clear every filter function from the element including sepia in a single declaration. Alternatively, set filter: sepia(0) to keep the sepia function in the stack at its identity value, which is useful when you want to animate between sepia and non sepia states because the function lists in both states will match and interpolation will be smooth across browsers. Using filter: none in the hover state when filter: sepia(1) is the resting state can produce inconsistent animation behaviour because the function lists differ. The visual builder defaults to keeping function entries with neutral values rather than removing them, which makes animatable states easier to author correctly.