Background Blur and Gradients

Where to Use Background Blur

Unless there is overlaying content, you shouldn't use Blurs everywhere. There are a few key places that you should use Blurs to direct user's attention to the important Information. Most often, there is enough contrast between background and foreground content; this is enough. It's about finding the right places to use rather than using it throughout.

To Increase Contrast

Often, when we have to display texts over an image, legibility takes a hit back. Using background blur, we can quickly resolve this problem and increase the contrast between the text content and the background image.

To Indicate

Anything that requires a bit of effort but rewarding or beneficial to the user is always a win. You can make use of the Background Blur to hint users about the underlying and imminent content. This is a great way to enhance the user experience of your app.

To bring focus

By adding a simple blur, you can direct users to the important content by eliminating everything surrounding it subtly.

System-Defined Materials

Apple provides materials designed for a specific purpose. For example, materials exist for matching the default theme. These materials have the right amount of translucency, blurring, and vibrancy values applied to make it easier for you to choose from based on what you need.

Vibrancy

Vibrancy increases user's visual perception by either making UI elements darker or brighter by altering the color's saturation value. Vibrant UI elements like labels and fills work well with iOS materials. Apple provides several vibrancy levels ranging from highest contrast to lowest, and pairing them with the right material is key to maintain legibility.

Dynamic

Using a Background Blur with an opacity quickly captures the design's look and feel. It also adapts to the background changes accordingly while maintaining consistency without making any changes manually to the foreground content. This doesn't happen when using a solid color as a separator.

Gradients

Gradients enable your design to leave a better impression compared to solid colors. Gradients are often used everywhere. The key is to find the right balance between not having any gradients at all to over-saturating your app with gradients.

Gradient Styles

Linear gradient is the most common and widely used gradient out there. In a linear gradient, the colors of the gradient blend from start color to end color in a straight line

Radial gradient is the one in which the color has one starting point and then it emanates outwards

Angle gradient you can use angles to define the direction of your gradient. Starts counter clockwise and the space between the start and the end points defines the angle.

Creating better Gradients

Working with gradients can be a little tricky because it’s really easy to go overboard. When working with gradients, I recommend picking analogous colors meaning to choose nearby colors to your main color or have colors with different saturation levels, which makes the gradient look more subtle and natural.

Resources

These resources will be really helpful to you when working with gradients!

• Eggradients
• UI Gradients
• WebGradients
• Gradient Buttons
• CoolHue
• Grabient
• Gradient Hunt