blur

JavaFX effect on background

by

import javafx.animation.*; import javafx.application.*; import javafx.beans.property.*; import javafx.embed.swing.SwingFXUtils; import javafx.geometry.Insets; import javafx.scene.*; import javafx.scene.control.Label; import javafx.scene.effect.*; import javafx.scene.Cursor; import javafx.scene.Node; import javafx.scene.image.*; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.stage.Stage; import javafx.stage.StageStyle; import javafx.util.Duration; public class FrostyTech extends Application { private static final double BLUR_AMOUNT = 10; private static final Effect frostEffect = new BoxBlur(BLUR_AMOUNT, BLUR_AMOUNT, 3); … Read more

blur of part of Background image with css

by

If it has to be dynamic, you should have some trouble, but you can have somewhere to start with this : HTML <div class=”background”></div> <div class=”mask”> <div class=”bluredBackground”></div> </div> <div class=”content”></div> CSS .content { width: 70%; height: 70%; border:2px solid; border-radius:20px; position: fixed; top: 15%; left: 15%; z-index:10; background-color: rgba(168, 235, 255, 0.2); } .background … Read more

CSS blur on background image but not on content [duplicate]

by

jsfiddle .blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: “”; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit-filter: blur(10px); -o-filter : blur(10px); transition : all 2s linear; -moz-transition : all 2s linear; -webkit-transition: all 2s linear; -o-transition : all 2s linear; … Read more