(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Shape Your Images with Divi’s Gradient Builder

Ask the Egghead Logo Icon Image

Image masks are often used to add interesting shapes to images. They allow the image to peek through the shape, giving the page a unique design element. With Divi’s Gradient Builder, you don’t necessarily have to use masks to create shapes. Instead, you can use the Gradient Stops and settings to create them! In this post, we’ll look at how to shape your images with Divi’s Gradient Builder to help you add unique designs to your images.

Let’s get started.

Preview

First, let’s take a look at what we’ll build in this tutorial.

First Example – Circular Image Shape

Desktop

First Example – Circular Gradient Builder Image Shape

Tablet

First Example – Circular Image Shape

Phone

First Example – Circular Image Shape

Second Example – Linear Image Shape

Desktop

Second Example – Linear Gradient Builder Image Shape

Tablet

Second Example – Linear Image Shape

Phone

Second Example – Linear Image Shape

Third Example – Elliptical Image Shape

Desktop

Third Example – Elliptical Gradient Builder Image Shape

Tablet

Third Example – Elliptical Image Shape

Phone

Third Example – Elliptical Image Shape

Fourth Example – Conical Image Shape

Desktop

Fourth Example – Conical Gradient Builder Image Shape

Tablet

Fourth Example – Conical Image Shape

Phone

Fourth Example – Conical Image Shape

Create the Layout

First, let’s create the layout that we’ll use in all the examples. This layout can be used as a hero section. It will include a title and description on one side and the image on the other. We’ll then use that layout and image for the examples.

Customize the Section

First, create a new Divi page and customize the Section. Open the section’s settings and change the Background Color to #f0f3fb.

  • Background Color: #f0f3fb

Create the Layout

Next, go to the Design tab and add 10% Padding to the Top and Bottom. Close the settings.

  • Padding: 10% Top, Bottom

Create the Layout

Add a Row

Next, add a Row with a 2/3 column and a 1/3 column.

  • 2/3, 1/3 Row

Add a Row

Go to its Design tab. Enable Use Custom Gutter Width and set the Max Width to 1480px.

  • Use Custom Gutter Width: Yes
  • Max Width: 1480px

Add a Row

First Column Settings

In the Row’s Content tab, open the settings for the Row’s first column, go to the Design tab and add 9% Padding to the Left and Right. Close the Column and Row settings.

  • Padding: 9% Left, Right

First Text Module Settings

First Text Module Settings

Next, add a Text Module to the left column.

First Text Module Settings

Select Heading 4 for the content text and add your body content.

  • Heading: 4
  • Body: Welcome to Divi

First Text Module Settings

Next, go to the Design tab. Set the H4 Font to Montserrat, the Weight to bold, the Style to TT, and the Color to #1d4eff.

  • Heading 4 Font: Montserrat
  • Weight: Bold
  • Style: TT
  • Color: #1d4eff

First Text Module Settings

Set the desktop Font Size to 16px, the tablet size to 14px, and the phone size to 12px. Change the Letter Spacing to 0.3em and the Line Height to 1.6em.

  • Size: 16px Desktop, 14px Tablet, 12px Phone
  • Letter Spacing: 0.3em
  • Line Height: 1.6em

First Text Module Settings

Scroll down to Spacing and change the Bottom Margin to 0px. Close the module.

  • Margin: 0px Bottom

Second Text Module Settings

Second Text Module Settings

Next, add a Text Module under the first one.

Second Text Module Settings

Set the text type to Heading 1 and add your body content.

  • Heading: 1
  • Body: Plan your financial future

Second Text Module Settings

Next, select the Design tab. Change the Heading Font to Montserrat, the Weight to Bold, and the Color to #0f1154.

  • Heading 1 Font: Montserrat
  • Weight: Bold
  • Color: #0f1154

Second Text Module Settings

Set the Font Size to 80px for the desktops, 40px for tablets, and 24px for phones. Change the Line Height to 110%. Close the module.

  • Size: 80px Desktop, 40px Tablet, 24px Phone
  • Line Height: 110%

Third Text Module Settings

Third Text Module Settings

Next, add a Text Module under the second one.

Third Text Module Settings

Leave the text type to Paragraph and add your body content.

  • Heading: Paragraph
  • Body: content

Third Text Module Settings

Next, go to the Design tab. Change the Text Font to Roboto, set the Weight to Medium, and the Color to black.

  • Text Font: Roboto
  • Weight: Medium
  • Color: #000000

Third Text Module Settings

Change the Size for desktops and tablets to 18px, and phones to 14px. Set the Line Height to 180%.

  • Size: 18px Desktop, 18px Tablet, 14px Phone
  • Line Height: 180%

Third Text Module Settings

Finally, scroll down to Spacing and set the Bottom Margin to 0%. Close the module’s settings.

  • Margin: 0px Bottom

Image Module Settings

Image Module Settings

Now, add an Image Module to the column on the right.

Image Module Settings

First, delete the dummy image by clicking the trash can or the reset icon above the image.

Image Module Settings

Next, scroll down Background, select the Image tab, and add your image. Leave all the image settings at their defaults. The image won’t show much at first. We’ll fix this as we go.

Image Module Settings

Next, select the Design tab and scroll down to Spacing. For desktops, add -10% Top, -30% Left, 10% Right Margin. Add 300px Top and Bottom Padding. These are the desktop settings. We’ll make adjustments for tablets and phones.

  • Margin (Desktop): -10% Top, -30% Left, 10% Right
  • Padding: 300px Top, 300px Bottom

Image Module Settings

Next, we want to ensure that the image shape is responsive. Select the tablet icon to open the settings for tablets and phones. Hover over the Margin settings and select the tablet icon that appears. This opens a set of tabs with a tab for each device type. Choose the Tablet tab and change the Margin to 0% Top, 0% Left, 0% Right Margin. The Phone tab will follow the Tablet settings, so we won’t need to adjust it for Margin.

  • Margin (Tablet/Phone): 0% Top, 0% Left, 0% Right

Image Module Settings

Next, select the tablet icon that appears when you hover over the Padding settings. Choose the Phone tab and change the Padding to 150px Top and 150px Bottom. The tablet Padding will follow the desktop settings. Close the module’s settings.

  • Padding: 150px Top, 150px Bottom

Image Module Settings

Shape Images with Divi’s Gradient Builder Examples

Next, we’ll use those settings and shape the images with Divi’s Gradient Builder. As we’ll see, several settings help us create interesting image shapes with Divi’s Gradient Builder.

Some key settings to keep in mind include stacking Gradient Stops and setting the pattern to repeat. Be sure to test your patterns on all screen sizes to make sure you like the shape.

For more information on using Divi’s Gradient Builder, search the Elegant Themes blog for “Gradient Builder“. You’ll find several posts with detailed tutorials to step you through the controls and settings.

First Example – Circular Gradient Builder Image Shape

Our first example gives the image a circular shape with a hole in the center.

First Example – Circular Gradient Builder Image Shape

Open the Image Module’s settings and scroll down to Background. Select the Background Gradient tab and set 6 Gradient Stops:

  • First Stop: 0%, #f0f3fb
  • Second: 45%, #f0f3fb
  • Third (on top of Second): 45%, rgba(41,196,169,0)
  • Fourth: 69%, rgba(250,255,214,0)
  • Fifth (on top of Fourth): 69%, #f0f3fb
  • Sixth: 100%, #f0f3fb

First Example – Circular Gradient Builder Image Shape

Next, choose Circular for the Gradient Type, set the Position to Center, use Percent for the Unit, and enable Place Gradient Above Background Image.

  • Type: Circular
  • Position: Center
  • Unit: Percent
  • Place Gradient Above Background Image: Yes

First Example – Circular Gradient Builder Image Shape

Second Example – Linear Gradient Builder Image Shape

Here’s a look at the second image shape example. This example places diagonal lines across the image.

Second Example – Linear Gradient Builder Image Shape

Open the settings, scroll dowl to Background, and select the Background Gradient tab. Add four Gradient Stops:

  • First Stop: 0%, #f0f3fb
  • Second: 5%, #f0f3fb
  • Third (on top of Second): 5%, rgba(175,175,175,0)
  • Fourth: 13%, rgba(41,196,169,0)

Second Example – Linear Gradient Builder Image Shape

Set the Gradient Type to Linear with a Direction of 150deg. Set it to Repeat. Use Percent for the Unit and enable Place Gradient Above Background Image.

  • Type: Linear
  • Direction: 150deg
  • Repeat: Yes
  • Unit: Percent
  • Place Gradient Above Background Image: Yes

Second Example – Linear Gradient Builder Image Shape

Third Example – Elliptical Gradient Builder Image Shape

Here’s our third image shape example. This one uses an elliptical shape.

Third Example – Elliptical Gradient Builder Image Shape

Open the Image Module’s settings and scroll down to Background. Select the Background Gradient tab and create four Gradient Stops:

  • First Stop: 0%, #f0f3fb
  • Second: 9%, #f0f3fb
  • Third (on top of Second): 9%, rgba(175,175,175,0)
  • Fourth: 21%, rgba(41,196,169,0)

Third Example – Elliptical Gradient Builder Image Shape

Next, change the Gradient Type to Elliptical and set the Position to Top Left. Choose Repeat Gradient, use Percentage as the Unit and enable Place Gradient Above Background Image.

  • Type: Elliptical
  • Position: Top Left
  • Repeat Gradient: Yes
  • Unit: Percent
  • Place Gradient Above Background Image: Yes

Third Example – Elliptical Gradient Builder Image Shape

Fourth Example – Conical Gradient Builder Image Shape

Our fourth example uses Conical to create a unique image shape.

Fourth Example – Conical Gradient Builder Image Shape

Open the Image Module’s settings, scroll down to Background, and select the Background Gradient tab. This one has 5 Gradient Stops:

  • First Stop: 23%, #f0f3fb
  • Second: 35%, #f0f3fb
  • Third (on top of Second): 35%, rgba(41,196,169,0)
  • Fourth: 65%, rgba(250,255,214,0)
  • Fifth (on top of Fourth): 65%, #f0f3fb

Fourth Example – Conical Gradient Builder Image Shape

Set the Gradient Type to Conical and leave the Direction at the default setting. Set the Position to Bottom, use Percent for the Unit, and enable Place Gradient Above Background Image.

  • Type: Conical
  • Direction: 180deg
  • Position: Bottom
  • Unit: Percent
  • Place Gradient Above Background Image: Yes

Fourth Example – Conical Gradient Builder Image Shape

Gradient Bulder Shape Results

All the layouts turned out well. The image shapes stand out and the images are still easy to understand. All are responsive, so they look great on any device.

First Example – Circular Image Shape

Desktop

First Example – Circular Gradient Builder Image Shape

Tablet

First Example – Circular Image Shape

Phone

First Example – Circular Image Shape

Second Example – Linear Image Shape

Desktop

Second Example – Linear Gradient Builder Image Shape

Tablet

Second Example – Linear Image Shape

Phone

Second Example – Linear Image Shape

Third Example – Elliptical Image Shape

Desktop

Third Example – Elliptical Gradient Builder Image Shape

Tablet

Third Example – Elliptical Image Shape

Phone

Third Example – Elliptical Image Shape

Fourth Example – Conical Image Shape

Desktop

Fourth Example – Conical Gradient Builder Image Shape

Tablet

Fourth Example – Conical Image Shape

Phone

Fourth Example – Conical Image Shape

Ending Thoughts

That’s our look at how to shape your images with Divi’s Gradient Builder. The Gradient Builder can create some interesting image shapes. Playing around with the Gradient Stops, trying different Gradient Types, and enabling Gradient Repeat are great ways to create new designs. Be sure to check your designs on all screen sizes and make adjustments if needed.

We want to hear from you. Have you used Divi’s Gradient Builder to shape your images? Let us know about your experience in the comments.

The post How to Shape Your Images with Divi’s Gradient Builder appeared first on Elegant Themes Blog.

Recent Posts

  • No Leads? Here’s Why (And How to Fix It)

    No Leads? Here’s Why (And How to Fix It)

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

  • How AI Helps Us Help You

    How AI Helps Us Help You

  • Future-Proof Your WordPress Site in 2025

    Future-Proof Your WordPress Site in 2025

  • Why You Need Managed WordPress Hosting from Ask the Egghead

    Why You Need Managed WordPress Hosting from Ask the Egghead

  • Your Website Is More Than Just Curb Appeal

    Your Website Is More Than Just Curb Appeal

  • Top Website Mistakes That Hurt Your Business

    Top Website Mistakes That Hurt Your Business

  • Plugin of the Week: WPForms Made Simple

    Plugin of the Week: WPForms Made Simple

  • SEO Simplified: Boost Your Website Without Tech Skills

    SEO Simplified: Boost Your Website Without Tech Skills

  • Find Your Perfect Website Style

    Find Your Perfect Website Style

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.