Online Gradient Image Maker with Button Generator
Top Rated Images

Poison Green Glow
rated: 5/5


Black Glass Button
rated: 5/5


Pink Glow
rated: 5/5


Passport
rated: 5/5


Lipstick
by: bella
rated: 5/5


Top Posters

kingoFcolor
Shared: 45 images
Rated: 75 times
Averaging: 4.267/5
admin
Shared: 36 images
Rated: 56 times
Averaging: 4.089/5
4u2ges
Shared: 19 images
Rated: 26 times
Averaging: 4.385/5
bella
Shared: 15 images
Rated: 27 times
Averaging: 4.444/5
zeno
Shared: 15 images
Rated: 1 times
Averaging: 1.000/5

Latest Shared Images

84 button
by: zenonia

black button
by: zeno

BLACK button
by: zeno

BackPanel
by: jsteinbrgr

BlueButThin
by: jsteinbrgr

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 OGIM + Text-It Engines

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 >>

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

USA flagarmenian flag
web graphics buttons tabs logos icons
clocks


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')

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')

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

OGIM· OGIM Gallery· OGIM Gallery RSS· OGIM Help· RC-OGIM Templates
About Text-It· Text-It Samples· Text-It Samples (older)· Text-It Tutorials
Armenia Flags Special· Russia Flags Special· USA Flags Special· UK Flags Special· Canada Flags Special