Online Gradient Image Maker with Button Generator
Latest Shared Images

Cocktail
by: kingoFcolor

Fun With Border ..
by: kingoFcolor

Fun with border
by: kingoFcolor

Neon in metal
by: foxy

Neon button
by: foxy

Top Posters

admin
Shared: 36 images
Rated: 48 times
Averaging: 4.188/5
kingoFcolor
Shared: 34 images
Rated: 43 times
Averaging: 4.419/5
4u2ges
Shared: 17 images
Rated: 23 times
Averaging: 4.348/5
padlock
Shared: 8 images
Rated: 8 times
Averaging: 4.000/5
foxy
Shared: 8 images
Rated: 6 times
Averaging: 4.000/5

Top Rated Images

Green Box Head for Slices
by: 4u2ges
rated: 5/5


Another Flag
by: admin
rated: 5/5


Flag Button
by: admin
rated: 5/5


Blue button + shade
by: 4u2ges
rated: 5/5


Marble Button
by: admin
rated: 5/5


Welcome to OGIM + Stripes maker + Text-It

Incorporating color gradient images to render background of HTML layers is a popular method for creating vivid 3D appearance and visual effects. Online Gradient Image Maker (OGIM) is a unique online application capable of generating wide variety of gradient images with up to 9 transition color points without owning and having experience with graphics design applications such as Photoshop. Furthermore OGIM features a stripes generator module which could draw precisely positioned stripes over gradient image to make uninterrupted and smooth joints while image is tiling in any direction. Finally a Round Corner Mask images generator in now part of the OGIM. There are practically infinite possibilities for blending colors, transition point locations, gradient types and stripes configuration while making rich images for site menus, buttons, background and highlights. For inspiration check out samples below and a Gallery of  images shared by other visitors.


To generate images with OGIM make sure browser supports cookies.

Samples generated with Text-It Engine

Web 2.0 or not... a new Text-It extension module to OGIM for generating web buttons, web tabs, web badges, icons, logon, banners and other graphic widgets is now available. Compact, yet powerful layers mixing engine allows drawing differently styled multiple strings of text and other external images over the base images generated with OGIM. Text-It could be launched from the main OGIM engine screen but requires an account (still free). Read more about Text-it graphics generator >>

NEW  3D Fill and Warp text rendering features are now part of "Text-It".

Images below were generated with OGIM and Text-It.
Click any image for reference page.


  


web graphics buttons tabs logos icons


Samples generated with OGIM Engine

Note: The text over sample images below is rendered with HTML. There is an advanced Text-It engine exist allowing to render text, symbols and other images over the base image generated with OGIM. See samples above.

Buttons
Background images for sample buttons were created in Gradient Image Maker. Appropriate border style was applied for button layers to aggregate 3D appearance. Click on a button to get its gradient OGIM reference.

Image Maker
Image Maker
Image Maker

Image Maker
Image Maker
Image Maker


Menu
Sample menu was created with 2 gradient images. One for the menu background (applied to menu table with repeat-x property) and another for menu separators applied to 1px wide cells between menu items. Borders were added to further separate menu from a background and highlight it.
Home News Support Contact About us

Gloss variation with Semi-Transparent Stripes and split gradient Reference for background

Home News Support Contact About us
Round Corner Stuff
Sample buttons with round corners. Click on a button to get its gradient OGIM reference.

Image Maker
Image Maker
Image Maker
Image Maker

Sample tabs with round corners. Click on a tab to get its gradient OGIM reference.

Image Maker
Image Maker
Image Maker
Image Maker

Header
Fairly simple but effective web site header made with 2 images painted with sea-green gradient and stripes.


Welcome to My Gift Shop

Masked Round Corner Box
A special Rounded Corners Mask images generator module (top-right side of the screen at OGIM engine) is capable of generating nearly perfect round corner images with radius anywhere from 1 to 500 pixels. Generator uses "Antialiasing" and "Matting" to smooth the oval and blend it with the surrounding background color and inner box color or even a pattern. 3 types of masks could be generated: 1) solid 2) with transparent outer oval area 3) with transparent inner oval area. Click "Help" button at OGIM screen or at the top menu for more information.

Here is a sample of the box with striped gradient pattern for the background and corners masked by images generated with OGIM. Note: There is no reference to corner mask images. They are built and downloaded directly at OGIM engine screen. Reference to Orange background pattern.

"While we are postponing, life speeds by."
Seneca (3BC - 65AD)bc
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Another sample of the box with striped horizontal gradient pattern for the background and corners masked by images generated with OGIM. Reference to background pattern.

"While we are postponing, life speeds by."
Seneca (3BC - 65AD)bc
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Bordered Round and Straight Corner Box
Following examples demonstrate how to create a bordered rounded and straight corner box with OGIM. This method does not use Masked Corner images but rather gradient images to create line or gradient border. Round corner images are generated with radial gradient. Five images are used to create the box below. Single Image (20x20 px) for round corners was created by using "radial" gradient while rendering a circle. Four remaining images (1x10 px. and 10x1 px.) are created with "line" gradient using the same set of gradient colors respectively configured as horizontal, vertical, mirrored horizontal and mirrored vertical gradients and bound to each side of the box.

Positioning created images for the precise joints is now just a matter of HTML styling. Based on this sample, various round corner and straight cut corner (use "diamond" gradient instead of "radial") boxes could be created with just a little effort and a bit of creativity.
Rounded Corner Box Images Reference: Corner | Left | Right | Top | Bottom


"While we are postponing, life speeds by."
Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

The rounded corners box could be somewhat "raised" as per example below which uses the same method as above but slightly different gradient color points.
Raised Round Corner Box Images Reference: Corner | Left | Right | Top | Bottom


"While we are postponing, life speeds by."
Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Next example displays a box with raised border on a dark background.
Raised Round Corner Box Images Reference: Corner | Left | Right | Top | Bottom


"While we are postponing, life speeds by."

Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Another variation with straight corner and line gradient for the middle part. Straight corner is rendered with a rectangle type of gradient.
Straight Corner Box Images Reference: Corner | Left | Right | Top | Bottom | Middle


"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

This example just opens a vault of opportunities for creating vivid bounding boxes. Use your imagination and vary gradient types, colors and gradient size for box joints and sides to design rich site content.
Futuristic Box Images Reference: Corner | Left - Right | Top - Bottom
Note: The 9-th gradient color point should always match the inner background color of the box. The 1-st gradient color point should always match the background color of the layer surrounding the box. To make the box compatible with any outer background color, the 1-st color point could be cleared making it transparent. But be aware that while most browsers support PNG transparency, older Internet Explorer (earlier than v7.0) does not support it and would render transparent area with solid color.



"While we are postponing, life speeds by."

Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Classic 8 image slices box with round corners, border and a shadow. Unlike samples above this box is created from a single image sliced with OGIM slicer tool. Reference for the image
After navigating to this OGIM reference, click "More" button within Slicer section, specify width/height for each slice and download 8 images (4 corners, 4 sides).
1 - 8x8 px, 2 - 12x8 px, 3 - 8x12 px, 4 - 12x12 px
5 - 1x8 px, 6 - 1x12 px, 7 - 8x1 px, 8 - 12x1 px
Slices dimension may highly depend on your HTML box styling and overall box configuration (round corner radius, shadow amount .. ect).


"While we are postponing, life speeds by."
Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')

Striped Bordered Round Corner Box
Someone asked at forum about applying stripes to gradient box border. While there are some limitations, layering striped gradient box border is still possible with some effort and images built at OGIM. Here is an example - a 3D box with striped border. For tips related to striped border see reply at forum.

Striped Bordered Box Images Reference: Corner | Left | Right | Top | Bottom | Center


"While we are postponing, life speeds by."
Seneca (3BC - 65AD)

"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')


If you found other interesting ways to use OGIM for generating background images, then share created images and post comments at forum.

web button maker, web tabs maker, banners maker, logo maker, web icons maker