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
299
questions
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 ...
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 ...
-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 ...
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 '...
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 ...
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 ...
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-...
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&...
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 ...
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-...
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 {
...
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 ...
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 ...
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 ...
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 { ...
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.
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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). ...
-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, ...
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 ...
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 ...
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 ...
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;
...
-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 ...
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, ...
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 ...
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....
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 ...
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 ...
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%; }
...
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....
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 ...
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 ...
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 ...
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. ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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( --...
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 ...
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 ...
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 ...