How to create a harsh steep/gradient

New Here ,
Jun 29, 2022 Jun 29, 2022

Copy link to clipboard

Copied

Hi. Im creating a website using squarespace and am using a photo as my background image for my landing page. Once a user scrolls down past the image, they see a white background. Im trying to create a suitable white/transparent gradient using photoshop so that the image transisions to white (giving the impression that it transitions to the background nicely. I've created a gradient but i am unable to make it look the way i want. I've tried playing around with various gradient settings but am unable to get it how I want it. This is what i'm going for:

 

-Image must be 100% white at the bottom of the image so that it blends into the website background

-The feathering/tapering (not sure what the right term is) should extend about half way up the image.

 

I've attached a couple of images of the gradient I've made. This is pretty much exactly how I want it, though i need there to be more white at the bottom so you cant really notice where the photo/website background begins and ends.

 

Any help would be really appreciated. Thanks.

 

Screen Shot 2022-06-29 at 9.32.40 pm.pngScreen Shot 2022-06-29 at 9.32.50 pm.png

TOPICS
macOS

Views

82

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 29, 2022 Jun 29, 2022

Copy link to clipboard

Copied

Hi, you can use the opacity in gradient to control it...regards

Ali Sajjad / Graphic Design Trainer / Freelancer / Adobe Certified Professional

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 29, 2022 Jun 29, 2022

Copy link to clipboard

Copied

LATEST

Be sure that the white end of the gradient is above the lower edge of the image. Another thing your may want to try is dragging the center point (diamond icon btween two stops) of the gradient to some other location:

Semaphoric_0-1656508796818.png

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines