In this tutorial, we will walk through creating a visually appealing glowing pink circle effect using SwiftUI. This effect can be a great addition to any app that requires an eye-catching and modern design element.
-
Background Color:
-
Color.black.edgesIgnoringSafeArea(.all): This sets the entire background to black, allowing the pink circle to stand out more prominently.
-
-
Outer Glow Circle:
-
Circle().fill(.pink): This creates a pink circle.
-
.frame(width: 200): The circle has a diameter of 200 points.
-
.blur(radius: 15): Adds a blur effect with a radius of 15 to create an outer glow.
-
-
Inner Glow Circle:
-
Circle().fill(.pink): Another pink circle on top of the first one.
-
.frame(width: 200): Same size as the first circle.
-
.shadow(color: .pink.opacity(0.5), radius: 10): Adds a shadow with a pink color (50% opacity) and a radius of 10 to enhance the glowing effect.
-
Final Result:
The combination of the blurred circle and the shadowed circle creates a layered glowing effect that gives the illusion of a soft, radiant pink glow against a black background. This technique can be adapted and customized with different colors, sizes, and effects to fit various design needs.
Feel free to experiment with the parameters to achieve the perfect glow effect for your project!