Learn how to create Drop Shadow and Blur Effects in Pen-pot

Welcome to a brief and insightful tutorial on enhancing your designs in Penpot. In this session, we’ll focus on two impactful design elements: creating a sleek drop shadow effect and incorporating a blur for added depth. Whether you’re a Penpot enthusiast or just starting out, these techniques are designed to elevate your design aesthetics. Let’s dive in and explore the steps to create shadow and blur effects in your Penpot projects!

Great! Let’s start by learning how to create a sleek drop shadow effect in Penpot. Follow these steps:

  1. Select the Object: Choose the object or element to which you want to apply the drop shadow effect.
  2. Access the Effects Panel: Locate the effects panel in Penpot. It’s usually found in the toolbar or menu options. Click on it to open the effects panel.
  3. Apply Drop Shadow Effect: Within the effects panel, you should see options for various effects. Look for the drop shadow effect and click on it to apply it to your selected object.
  4. Adjust Settings: After applying the drop shadow effect, you’ll likely have options to adjust its settings. This may include parameters such as the angle, distance, blur, and opacity of the shadow. Experiment with these settings until you achieve the desired look.
  5. Preview and Fine-Tune: Once you’ve adjusted the settings, preview how the drop shadow looks on your object. If necessary, fine-tune the settings further until you’re satisfied with the result.
  6. Apply to Other Objects: If you have multiple objects that you want to apply the same drop shadow effect to, you can easily do so by selecting those objects and repeating the same steps.

Now, let’s move on to incorporating a blur effect for added depth in your Penpot designs:

  1. Select the Object: Choose the object or element that you want to add a blur effect to.
  2. Access the Effects Panel: Just like with the drop shadow effect, access the effects panel in Penpot.
  3. Apply Blur Effect: Look for the blur effect option within the effects panel and click on it to apply it to your selected object.
  4. Adjust Settings: Similar to the drop shadow effect, you’ll have options to adjust the settings of the blur effect. This may include parameters such as the intensity or radius of the blur. Experiment with these settings to achieve the desired level of depth.
  5. Preview and Fine-Tune: Preview how the blur effect looks on your object and fine-tune the settings as needed until you’re happy with the result.
  6. Combine with Other Effects: Feel free to combine the blur effect with other effects or techniques to further enhance your design. For example, you can apply both a drop shadow and a blur effect to create a more dynamic visual effect.

Create drop shadow effect

  • Begin by creating a rectangular shape and filling it with white.
image 139 dravyafolio's Drop Shadow from UI/UX Designing Categories
  • Navigate to the sidebar, locate the Shadow section, and click the ‘+’ icon.
image 141 dravyafolio's Drop Shadow from UI/UX Designing Categories
  • In the Shadow section, choose either Drop Shadow or Inner Shadow.
image 142 dravyafolio's Drop Shadow from UI/UX Designing Categories
  • Opt for Drop Shadow and click the three dots icon next to the effect layer to access the settings.
image 143 dravyafolio's Drop Shadow from UI/UX Designing Categories
  • Customize the shadow’s direction using the X and Y inputs. Adjust blur, spread, color, and opacity to your liking.
image 144 dravyafolio's Drop Shadow from UI/UX Designing Categories

Adding a Blur Effect

  • Import an image into your project.
  • Head to the Blur section in the sidebar and click the ‘+’ button.
image 145 dravyafolio's Drop Shadow from UI/UX Designing Categories
image 146 dravyafolio's Drop Shadow from UI/UX Designing Categories

Conclusion

Drop shadows and blur effects in Penpot adds depth and dimension to your designs. With these simple steps, you can elevate the visual appeal of your elements. Stay tuned for more advanced techniques, including creating captivating glass effects, in our upcoming tutorials. Happy designing!

dravyafolio Business Booster

Boost your Business with
dravyafolio' AI Powered Solution

Are you feeling stuck with the current solutions which involves multiple level of drop-shippers and Agency leading to almosting 3X Cost for same service.

We are here to solve this for you.
dravyafolio’s is featured with more than 5 Members, carrying expertise in Design, Development, Marketing & Scaling of Business with the help of Modern AI trends

Related Blog

Share this Article!!

Open chat
df Business Booster
Hello 👋
This is Shruti.

How can I help you?