is there any tools for having blur background like iOS UI?
I´m pretty sure we have this topic already but can´t find it anymore.
You might draw a rectangle and drag an image onto it in layers panel and add the blur filter to it:
or have a look at this tutorial: https://www.smashingmagazine.com/2017/08/introduction-gravit-designer-designing-weather-app-part-1/
Hey @MohammadRezaJelveh, welcome to our forum and thanks for your question.
Please see this video on how to apply a background blur: https://www.dropbox.com/s/9i370sts635px3x/background-blur.mp4?dl=0
Hope that helps. Please let me know if you have more questions.
@christian.krammer, link is offline. Will Gravit have Brack-drop Blur filter like Adobe Xd and Mac / IOs UI?
Do you mean back-drop-blurry-shadow?
@adson do you have this in mind?
If I export a transparent blurry background like you did to PNG or SVG, it will work?
Not sure what you mean? The background blur works only if there is something to be blurred below. If there are only transparent pixels, exported PNG/SVG should be transparent two.
Too bad that SVG does not support the background fill feature.
I exported to PNG, and I dropped two pictures, testing… the exported blurry PNG image is not blurry.
I tested using “transparent two” and it did not work.
I´m not sure what you´re talking about; when I put an image in the first layer. Duplicate the image, draw a rectangle over part of it and drag the doubled image onto it in Layers panel - use blur filter on it and export to SVG the effect shows up in Safari browser and Inkscape for instance.
I am referring to a transparent blurry layer (without picture) that I want to export to PNG and SVG, so I can use it as background or a tile over any picture or anywhere without depending on “blurry pictures”. But I saw it did not work. I have to insert CSS (for example, -webkit-filter: blur(2px);) inside SVG. PNG does not support transparent blurry layer.
PNG don´t support any layers, blurry or not. But PNG can contain transparent pixels of course. If you want to blur a certain part of any content a double must be masked and the filter applied to the mask - which can be moved with the subselect tool:
Hello, actually I am not sure that it is what I wanted. I will explain in the three videos:
Example 1 - You can see as I exported a transparent blurry layer to PNG and dropped the exported PNG, and the picture of Steve Rogers did not get blurry with he PNG blurry transparent.
Example 2 - As you have suggested me to use mask, but it did not work:
Example 3 - As the mask did not work, I replaced for clip. Unfortunately like the Example 1, the picture did not get blurred with the exported PNG blurry 10% white transparent.
Maybe we talking about different things - don´t know
Actually, not what I wanted. I wanted to export a blurry transparent shape without image/picture. But I know this blur feature is not supported in any format when exported if the picture is transparent.
When it´s transparent there´s nothing to blur I guess.
For pattern and tile.
Imagine like in CSS:
And in HTML
<div class="main">Steve Rogers</div>
Why not use the blur() css filter function directly in your .main class?
Because the exported SVG would come with included blur filter, but I can see that it did not come with it when I export from Gravit Designer to SVG. Then I have to include inside SVG.