How to use the generator
- Pick Linear or Radial.
- For a linear gradient, drag the angle. 0° runs from bottom to top, 90° from left to right, 180° from top to bottom.
- Change the colors. Each one has a slider for where it sits, from 0% at the start to 100% at the end.
- Add colors with Add a color, up to five. The new one goes in the widest gap.
- Copy the CSS, or pick a size and press Download PNG.
Reverse flips the order of the colors. Random colors tries a new set and keeps where each color sits. The gradient also sits in the page's address, so the link brings it back.
The sizes
- Square post, 1080 x 1080: Instagram, Facebook and LinkedIn feed posts.
- Portrait post, 1080 x 1350: the tallest feed post on Instagram and Facebook. It takes up more of the screen.
- Story or reel, 1080 x 1920: Stories, Reels, TikTok and YouTube Shorts.
The preview takes the shape of the size you pick, so you see the picture you get. The PNG is drawn with the same angle and stops as the CSS, so it matches the preview.
Gradients that look good
- Keep the colors close. Two neighbors on the color wheel, like blue and teal, blend smoothly. Opposites, like blue and orange, can turn gray in the middle. Add a third color between them to keep it bright.
- Use a light and a dark of one color for a calm background that never fights your text.
- Put text on the calm end. Text over the middle of a strong gradient changes contrast from letter to letter.
Use it in Postfjord's design editor
In the design editor, pick a shape or the page and choose Gradient under its colors. Set the first and second color, a middle color, the direction and the angle. Gradients from this design are made from your own colors, so they fit your brand. One design saves in every size your channels need.
FAQ
What is the difference between linear and radial?
A linear gradient runs in a straight line at the angle you set. A radial gradient starts in the middle and spreads out in a circle to the corners.
Can I use the PNG as a post?
Yes. It is a plain picture with no watermark. Add text in your design app, or post it as a background for a quote.
Does the CSS work in every browser?
Yes. linear-gradient and radial-gradient work in every browser in use today.
Does the tool save my gradient?
Only in the link. It runs in your browser, and nothing is sent to Postfjord or saved.