2022-06-22
3959
#css
Oscar Jite-Orimiono
119740
Jun 22, 2022 ⋅ 14 min read

A complete guide to using CSS filters with SVGs

Oscar Jite-Orimiono I'm a self-taught frontend web developer. I build websites so everyone finds a home online. The digital space is massive, full of endless possibilities — let's explore it together!

Recent posts:

how to design apps with Apple Intelligence in mind

How to design apps with Apple Intelligence in mind

Apple Intelligence is here. What does it mean for frontend dev and UX? Explore the core features of the update, do’s and don’ts for designing with Apple Intelligence in mind, and reflect on the future of AI design.

Murat Yüksel
Jun 24, 2025 ⋅ 10 min read
How To Optimize Your Next.js App With After()

How to optimize your Next.js app with after()

Next.js’ after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

Temitope Oyedele
Jun 24, 2025 ⋅ 11 min read
JavaScript Loops Explained, And Best Practices

JavaScript loops explained, and best practices

JavaScript loops like for, for...of, and for...in are constructs that help run a piece of code multiple times.

Rahul Padalkar
Jun 23, 2025 ⋅ 8 min read
8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 ⋅ 16 min read
View all posts

7 Replies to "A complete guide to using CSS filters with SVGs"

  1. Very interesting, thanks.
    Last fall, I decided that in my 60s it would be good to learn some other profession and decided that the frontend would be closest to me. Unfortunately, the process does not go so fast, but now I am mastering the CSS. Just here there will be one more point to practice

  2. This isn’t a comment on the article per se, which is awesome btw, just an observation that your print stylesheet has a rule of display:none; for img but for an article like this the images are almost the whole point.
    I sometimes print articles to PDF for later perusal and I had to come back and disable your CSS rule before the article could make complete sense in the PDF.

  3. Thanks,Oscar!it is informativel for me right now as I learn and work on a css animations project. I’m better at it with you.)This is really important when trying to find a simple and clear explanation.

  4. Hey just noticed that the knockout text doesn’t work with just the code you provided. Tested it in Edge and Firefox as of 2/3/2023 using the latest build of each.

    1. Hi, the code provided is just to create the filter. I didn’t include CSS because it is assumed that you already know how to style text with CSS.

      Here’s the CSS I used:

      h1{
      font-family: ‘Poppins’, sans-serif;
      position: absolute;
      width: 1000px;
      padding: 20px;
      font-size: 5rem;
      font-weight: 800;
      filter: url(#knockout);
      }

      Try this; it should work fine on any modern browser, including Firefox and edge. Cheers!

Leave a Reply