Sketch in 60 Seconds: Create a Frosted Background Effect
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Read Time:
1 min
It’s time to learn something super-quick in Sketch; a frosted background effect. So without further ado, let’s jump in!
Frosted Background in 60 Seconds

Start by placing an image on your Sketch artboard, then cover it with a simple rectangle shape. Fill the rectangle with a shade of white, then reduce its opacity to 50%.



To complete the effect, head over to the inspector and select Background Blur. Choose an Amount of between 5px and 10px, which will give you something like this:



Your rectangle will maintain its frosted effect no matter where you move it over the image, and you can even play with different background colors, opacity levels, and blur amounts.
Conclusion
That’s it! I hope you enjoy this quick and easy effect in Sketch; let us know what you use it for!
Advertisement
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Sign upAdi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value.
Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals.
When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets.
You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.