Questions tagged [css-filters]

CSS filters are post-processing effects such as opacity, gradients, and shadows which can be applied to elements using CSS3 properties

Filter by
Sorted by
Tagged with
0 votes
1 answer
66 views

How to achieve CSS-only image glow effect [duplicate]

I have achieved an image glow effect that I like by adding a copy of the image itself in html, as well as blurring and saturating it using CSS filters. However, ideally I would like to achieve the ...
Filip Östermark's user avatar
2 votes
2 answers
247 views

Transition on backdrop-filter blur causing dark inset borders (in chrome AND windows only)

During a transition on backdrop-filter, I'm noticing a dark inset shadow, only visible during the transition. It seems this only happens in chrome/webkit based browsers on windows (10 & 11) : My ...
Lars's user avatar
  • 3,165
-2 votes
1 answer
61 views

CSS filters default values

I'm interested in the following CSS filters: blur brightness contrast grayscale hue-rotate invert opacity saturate sepia What are the default values for each (preferably as a % value, where ...
danday74's user avatar
  • 53.6k
3 votes
1 answer
73 views

Get filter to NOT apply to nested pseudo elements

I've been implementing email-style color coding for the borders of deeply nested quotes: Technically, they're not borders per se but :before pseudo elements. And the 'footers' (the bits saying '...
Dennis Hackethal's user avatar
0 votes
0 answers
34 views

-webkit-backdrop-filter: url() doesn't work under Mac and IOS

I was trying to use CSS with backdrop-filters: -webkit-backdrop-filter: url(#filter-58605); backdrop-filter: url(#filter-58605); And I can't figure out why they do not work on Mac Safari, IOS ...
Arnobi's user avatar
  • 1
1 vote
0 answers
69 views

Blur edges of a clip-path

A project I'm working on has a polygon gradient shape behind an image and I can't figure out how to get the shape behind the image and blurred without blurring the image. Side note: this project is ...
Flexipop's user avatar
1 vote
1 answer
256 views

css revert filter with invert(1) and hue-rotate(180deg)

When enabled, my website uses a filter applied to the entire site to obtain a simple dark mode. // this class applied to the entire body (when dark mode enabled) .dark-mode { filter: invert(1) hue-...
Stanton's user avatar
  • 904
1 vote
4 answers
681 views

Backdrop Filter Style Being Applied After Animation

To further understand React I have created a project using react-router-dom, styled-components and framer-motion. My versions are like so. package-json: .... "react": "^18.2.0&...
johnvenkiah's user avatar
0 votes
0 answers
58 views

CSS: Slight transparent overlay over random image: How to keep contrast

I have random b/w images and want to put a b/w div overlay on top. The image should shine through and the div must be in any case different from the background. So If the image part is dark the ...
Nils Pitapatting's user avatar
0 votes
2 answers
46 views

i have a go to top button and i want to change its text and outline color to white when the background of button is dark so that its text is visible

HTML CODE <button id="scroll-top" (click)="scrollTop()" style="background: url('scroll.svg') center 0px no-repeat" > Go to Top </button> CSS CODE #scroll-to-...
Prabhat Bhargav's user avatar
0 votes
1 answer
79 views

Silhouette with CSS filters

I have a list of organization logos on a web page. Most of them use a couple of different colors. I would like to show the silhouette of the logos, and only reveal the real colors on hover. body { ...
Nekomajin42's user avatar
0 votes
1 answer
29 views

I have a body background image <body background="img url here"> and I want to add a grayscale effect to it [duplicate]

I have a body background image <body background="img url here"> and I want to add a grayscale effect to it. Tried searching the web but couldn't find a solution. Here is my HTML and ...
Mabe's user avatar
  • 1
1 vote
0 answers
234 views

Firefox flickering when using CSS "filter: drop-shadow()"

Firefox flickering when using CSS "filter: drop-shadow()" This is the CSS: .glow { filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.25)); -webkit-filter: drop-shadow(0px 0px 50px ...
Hyppa's user avatar
  • 11
3 votes
1 answer
440 views

CSS filter one background image on an element that has multiple background images

I've got an element with this css. It works great, but I want to blur the image that is set to cover. I can't find a way to apply filters to just one background image. I realize I could probably set ...
i i's user avatar
  • 1,143
0 votes
1 answer
530 views

How to download image with css filters in React

Hi I'm trying to make photo filter edotor with react and css I'm adding css filters on photo and now need to download edited photo but I only managed to download just uploaded photo import { ...
Achi's user avatar
  • 55
0 votes
1 answer
126 views

How to reduce backdrop filter from period of length

I want to smooth out the nav bar backdrop filter so it's less noticeable. But how can I reduce the backdrop filter from 100% to 0% to the bottom.
Xanthan's user avatar
  • 151
1 vote
0 answers
449 views

backdrop-filter blur stops working as soon as border-radius is applied to the DIV

Strangely, it started happening since Chrome94 and only on my Android phone (while everywhere else it still works fine like in my Android tablet). When border-radius: 30px; is removed from the class ...
HolyResistance's user avatar
3 votes
1 answer
384 views

CSS filter composed of multiple SVG filters makes image darker

I can apparently chain a sequence of css filters together by simply concatenating them, which seems to work: filter: brightness(200%) brightness(200%); But when the individual filters in question ...
Don Hatch's user avatar
  • 5,121
0 votes
0 answers
22 views

How to prevent an element with a filter from appearing on top of a element with float? [duplicate]

I have two elements, one has a fixed width and is set to float to the right (red element) while the other is a full width block element (blue element). Normally, the blue element is behind the red ...
Brandon's user avatar
  • 107
0 votes
1 answer
707 views

Optimize svg filter turbulence to get better performance

I'm using a svg turbulence filter to create a water effect but it is lagging on low-end and mid-end computers so I was wondering if there was any way to optimize the animation or if there were any ...
Louis Lecouturier's user avatar
0 votes
1 answer
173 views

How do i get rid of the border of background color in blur effect CSS

when i hover over the image i want the image to blur out and enlarge like it does, but there's this border that appears and disappears before the animation ends that is correlated to the background ...
Foras's user avatar
  • 1
0 votes
0 answers
110 views

Building sepia theme for mobile browser using CSS

I am building an iOS Safari extension that inverts to different themes (Gray, Dark, and Sepia). Gray and Dark work well, but it doesn't work as expected for the Sepia one. It change colors of not only ...
Usama Fouad's user avatar
3 votes
1 answer
2k views

SVG change dynamic color

I have svg images in menu list but want to change color of svg image(.svg). It is only possible using filter css property. I got the filter value from hex to css filter (library : hex-to-css-filter). ...
Vinod Patidar's user avatar
-1 votes
1 answer
665 views

Once I have a base64 url how can I change the filter for brightness and contrast?

If I have an image in base64 ex. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg== What's the fastest way to change a filter (ex. brightness, ...
chuckd's user avatar
  • 13.7k
1 vote
1 answer
850 views

Can I change the brightness and contrast of an image before cropping it with ngx-image-cropper?

Question - Is there any easy way (ex. CSS) to change the brightness and contrast of an image before sending it to ngx-image-cropper, so that when I call crop() the brightness/contrast persist to the ...
chuckd's user avatar
  • 13.7k
3 votes
1 answer
398 views

Why is hue-rotate(180deg) not its own inverse? [duplicate]

The hue-rotate() filter function "rotates the hue of an element ... specified as an angle". If this were true, filter: hue-rotate(180deg) hue-rotate(180deg) would have no effect. But it ...
jameshfisher's user avatar
  • 34.7k
1 vote
1 answer
128 views

Canva Duotone Effect

I've looked around for this question but cant seem to find a response. I am attempting to replicate a duotone image i created on canva, but through CSS. I have attached two images, the first image is ...
ThomasL123's user avatar
1 vote
0 answers
95 views

How to set different transition times for individual CSS filter functions?

Let's assume I have a filter property like filter: drop-shadow(25px 25px 2px white) grayscale(100%) brightness(30%); A transition affects all kind of filters. transition: filter 5s; ...
AFoeee's user avatar
  • 731
-1 votes
2 answers
1k views

Can the shadow from `drop-shadow` only be cast onto specific elements?

The top image below indicates how drop-shadow would be drawn if applied to the top element. I'm trying to determine if it's possible to have the shadow cast only upon certain objects (as illustrated ...
David Link's user avatar
2 votes
1 answer
2k views

CSS filter: use hue rotation to change certain colors only (like Photoshop Hue/Saturation)

I was wondering if it is possible to perform a hue/saturation color transformation, using css/svg filters, in the same way that Photoshop Hue/Saturation works. Essentially, from what I've read, ...
Marco Couto's user avatar
0 votes
1 answer
505 views

Add color filter to dark part of image and another filter to light part of the image?

My challenge is to add color filter to dark part of image and another color filter to light part of image. To achieve effect like this https://i.stack.imgur.com/niAKW.jpg I am using canvas with ...
Ales Malusek's user avatar
0 votes
0 answers
264 views

How to create dark mode with css filter without breaking positioning of fixed elements?

I would like to create a dark mode and other color filters for my application. Therefore I tried to apply this css filter to body filter: invert(1); But I will break the positioning of fixed elements....
mrkshx's user avatar
  • 11
0 votes
2 answers
3k views

CSS filter to change color of image pixels on hover

Is there a CSS filter that can change all the pixels of an image to a different color? I found this one but it is not the same: How to change the color of an image on hover I found this guide and it ...
1.21 gigawatts's user avatar
0 votes
0 answers
113 views

Drop Shadow not working in separate class, only general

I am creating a page with multiple slanted divs on it. This divs should have a "border" (which I am currently generating with a drop-shadow). Using the filters on an extra .dropshadow class ...
JonSnow's user avatar
  • 573
3 votes
0 answers
2k views

Alternative to backdrop-filter that works with CSS animations

We have a simple CSS background animation below with a div in the foreground that has backdrop-filter applied. * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } ...
Lynel Hudson's user avatar
  • 2,345
4 votes
1 answer
2k views

CSS backdrop-filter blur not blurring at the edges correctly on Windows (works on macOS)

The CSS property backdrop-filter: blur is causing some issues for me on Windows (screenshots below). At the edges of the filtered area, it doesn't seem to blur all the way to the edge of the container....
romiem's user avatar
  • 8,500
3 votes
1 answer
474 views

How to remove shadow on edge of screen for CSS filter blue and animation

This only affects Chrome! Firefox and Safari doesn't have this effect. I have a rotating div that is half off of the screen with a filter blur applied. As the square is rotating, every 90deg a shadow ...
phvt's user avatar
  • 31
1 vote
2 answers
9k views

Add blur with CSS radial gradient

I am trying to create a "focus" effect with CSS. I have managed to add some background color and use radial-gradient to create almost what I want. See the pen below (in the pen I used an img ...
fekioh's user avatar
  • 904
1 vote
1 answer
709 views

Backdrop-filter ignores blur value on stacked elements in forefront

The smallest innermost circle in the snippet below has a backdrop-filter blur of 10rem that's not being applied. It looks like the span element is inheriting the same exact amount of blur from it's ...
Lynel Hudson's user avatar
  • 2,345
1 vote
1 answer
2k views

CSS "filter" property does not work on Safari when using inline SVG in CSS like 'filter: url(data:image, ...)'

[EDIT] I've reviewed my entire post to add precisions about the problem and for additional ressources. ... I'm new to SVG usage for webdesign, but I intend to implement a cool CSS feature for a theme. ...
Chris's user avatar
  • 61
2 votes
0 answers
3k views

canvas context filter blur not working in ios safari/chrome

I want to draw some colors on person's image using canvas. And then blur the colors. To achieve this I am using canvas blur filter as following: ctx.filter = 'blur('+ (box_width / 5) + 'px)'; But ...
Savina Chandla's user avatar
4 votes
2 answers
322 views

How do I show an ::after element above everything regardless of overflow and opacities of filters of siblings and nephews

So I have an element that I want to show a tooltip for. But of course, to show this tooltip, I need to make it go above everyhing, no matter what (including overflow: hidden parents). Right now I'm ...
TopchetoEU's user avatar
0 votes
0 answers
137 views

How to prevent a CSS filter from sometimes causing HTML elements to reposition?

Sometimes, when applying a CSS filter, HTML elements become repositioned. As a simple reproducible example, follow these steps: Go to https://www.virustotal.com/gui/ Click on 'Choose file' and select ...
End Anti-Semitic Hate's user avatar
7 votes
1 answer
4k views

Backdrop-filter: Blur not working on a position absolute element

I'm trying to make a tooltip with a glass effect using the backdrop-filter: blur, except that the filter doesn't seem to work on elements in absolute position. I imagine this is because the item has ...
Baudelaire's user avatar
4 votes
2 answers
2k views

Backdrop filter not working when mix blend mode of another element on the page is changed

The browser version is Chrome 87.0.4280.88 Here is how I accidentally detected this bug: There are two independent divs on the page and both are position: fixed; One of them has a hover effect with ...
HolyResistance's user avatar
0 votes
1 answer
323 views

Weird glitch when using transition to filter:blur(0) in Chrome

This started happening just recently on Chrome (right after the Chrome 88 update). It does it for all webkit browsers I tested on Windows (Brave/Edge) Seems like something to do with cached ...
Miro's user avatar
  • 8,432
1 vote
1 answer
763 views

CSS blur filter on 3D transformed elements

document.querySelector( 'style' ).innerHTML += ` hr:nth-of-type( 1 ) { transform: translateZ( calc( var( --mid ) * 1rem ) ); } hr:nth-of-type( 2 ) { transform: translateZ( calc( var( --...
Lynel Hudson's user avatar
  • 2,345
1 vote
1 answer
236 views

Weird Bug with SVG Filters in CSS

I am currently try to find the best way to lazy-load images. While loading I want to show a tiny 10x10 image of the original (inline / base64). As this tiny image, of cause has a very poor quality I ...
rakete's user avatar
  • 3,003
0 votes
2 answers
217 views

CSS defined edges with blur transition

I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so ...
SypieDypie's user avatar
1 vote
0 answers
68 views

How to do blur into blur to "backdrop-filter" in CSS? [duplicate]

How to do blur into blur to backdrop-filter in CSS? I tried backdrop-filter:blur, div blur it working but div inner div blur not working. I want to give more blur to the div inside a blurry div. As an ...
en0ndev's user avatar
  • 693

1
2 3 4 5 6