# Tag: Gaussian Blur

This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients.

In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels of radius and color red. The idea is make this circle appears like a sphere and make the ellipse look like a shadow.

```import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.geometry.*;   Frame { title: "JavaFX Sphere", width: 300, height: 300, visible: true stage: Stage { content: [ Ellipse { centerX: 120, centerY: 140, radiusX: 60, radiusY: 20 fill: Color.BLACK }, Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED } ] } }```

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

`effect: GaussianBlur{ radius: 20 }`

This creates a gaussian blur of radius 20. The first ellipse was like

and now with the effect becomes

```RadialGradient { centerX: 75, centerY: 75, radius: 50, proportional: false stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 0.3 color: Color.RED}, Stop {offset: 1.0 color: Color.DARKRED}, ] }```

First lets look at the gradient. It starts with a white color, going to red during the first 30% of the way. The remaining of the way is the color red going to a dark red. It creates a gradient like this one:

```import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.effect.*; import javafx.scene.geometry.*;   Frame { title: "JavaFX Sphere", width: 300, height: 300, visible: true stage: Stage { content: [ Ellipse { centerX: 120, centerY: 140, radiusX: 60, radiusY: 20 fill: Color.BLACK effect: GaussianBlur{ radius: 20 } }, Circle { centerX: 100, centerY: 100, radius: 50 fill: RadialGradient { centerX: 75, centerY: 75, radius: 50, proportional: false stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 0.3 color: Color.RED}, Stop {offset: 1.0 color: Color.DARKRED}, ] } } ] } }```