All Questions
14
questions
512
votes
8
answers
599k
views
SVG drop shadow using css3
Is it possible to set drop shadow for an svg element using css3, something like
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
I saw some remarks on creating shadow using ...
- 58.3k
94
votes
6
answers
79k
views
How to calculate required hue-rotate to generate specific colour?
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
...
- 14.8k
19
votes
7
answers
11k
views
SVG filter only working when added in style attribute (Firefox)
I added a blur effect svg to my HTML(text/html):
<html>
<head>...</head>
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" height="0">
...
- 299
3
votes
1
answer
2k
views
Inlining SVG filters as data URI
I'm trying to add a SVG filter using a data URI in the CSS but cannot get the effects applied to my image.
It seems that it should be supported as both data URI and SVG filters are supported in all ...
- 107
1
vote
1
answer
631
views
SVG is fully invisible in Firefox
Before this gets marked as a duplicate: we've already ensured the width and height are properly set. I'm phrasing it as invisible because although it takes up the correct space and is even loaded in ...
- 972
11
votes
1
answer
6k
views
Transition an SVG Filter
I'm trying to create a material design like shadow on an SVG circle. I want this shadow to grow with a nice transition when you click on the circle, but at the moment I'm struggling to even figure out ...
- 34.3k
8
votes
5
answers
8k
views
SVG filter not showing up in Firefox, working fine in Chrome
I want a piece of dark text on dark background to have a white glow outside of it. Although the default drop shadow filter in CSS (like filter: drop-shadow(2px 2px 2px black)) officially should ...
- 2,807
6
votes
1
answer
865
views
SVG filter with variable?
I have an SVG glow filter implemented like so:
<filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur ...
- 323k
5
votes
1
answer
2k
views
Safari renders wrong colors when using blur filter
I try to apply a blur filter to a svg elment, but it seems that Safari can't render the colors right. Here is an example of my problem:
<svg height="110" width="110">
<defs>
...
- 1,142
3
votes
3
answers
1k
views
Colorizing grayscale image
I'm trying to colorize grayscale images on the fly with user-selected foreground and background colors (limited to red, green, blue, cyan, magenta, yellow, black, and white). The effect I want is as ...
- 253
2
votes
1
answer
2k
views
SVG Filter tag on hover
I am trying to animate an SVG which I managed to do via this filter:
<defs>
<filter id="green-fill" x="0%" y="0%">
<feFlood flood-color="#fff"/>
<feOffset dx="85">
<...
2
votes
0
answers
417
views
SVG filter loses colour when the SVG is hidden or external
<svg style="display:none">
<defs>
<filter id="blue-glow-display-none">
<feMorphology in="SourceAlpha" operator="dilate" radius="2" />
<feGaussianBlur ...
- 323k
1
vote
2
answers
1k
views
Mimic Photoshop RGB levels with CSS and SVG filter
I've done this in the past and I know it exists, but for some reason I don't find it right now (wasted couple of hours with no success).
I want to mimic the Photoshop RGB levels via CSS.
On the ...
- 661
0
votes
1
answer
685
views
SVG filter <feOffset> - possible to set dx and dy in pixel value?
I'm currently in the phase of learning and implementing SVG and I've stumbled upon a "drop-shadow" issue in which I can't seem to set the drop-shadow to be assigned in px values.
As an example:
<...
- 1,436