Orb Gradient Generator

An orb gradient is a circular composition that reads as a 3D sphere rather than as a flat disc. The illusion comes from atmospheric rim lighting (the edge glows brighter than the centre, suggesting the sphere is catching directional light) and from colour gradients across the surface (which follow the spherical curvature). Together, these signal to the viewer that the shape has volume, not just outline.

The aesthetic became popular around 2023 as a hero-section visual treatment, particularly on premium product marketing pages, sci-fi book covers, and AI product launches. By 2025, "the glowing orb" had become its own design idiom: viewers immediately read the visual as suggesting energy, technology, premium product, or something planetary depending on the palette.

The Gradients.design orb generator renders the sphere using WebGL with real per-pixel rim falloff math. The result reads as authentic at any export resolution because the geometry is computed at render time. Compare this to Photoshop or Figma orb mockups, which fake the effect with circle layers plus outer-glow filters and break down at large sizes.

Rim lighting in 3D graphics simulates the way real spheres catch light at their edges. Think of a backlit object: the edges glow because thin parts of the object transmit light, while the centre is opaque. Even when there is no transmission (a solid metal sphere), atmospheric scattering produces a similar effect: blue tint on the upper rim, warm tint on the lower rim, soft glow across the silhouette.

Mathematically, the rim effect is driven by the dot product of the surface normal and the view direction. At the centre of a sphere facing the viewer, the surface normal points directly at the viewer (dot product near 1.0). At the rim, the surface normal points perpendicular to the view direction (dot product near 0.0). The rim glow brightness is proportional to (1.0 minus dot product), raised to some power that controls falloff sharpness.

The Gradients.design orb shader runs this math per pixel:

precision highp float;
varying vec3 v_normal;
varying vec3 v_view_dir;
uniform vec3 u_rim_color;
uniform float u_rim_power;

void main() {
  float rim_factor = 1.0 - max(dot(v_normal, v_view_dir), 0.0);
  rim_factor = pow(rim_factor, u_rim_power);
  vec3 surface_color = /* gradient sampling */;
  vec3 final = surface_color + u_rim_color * rim_factor;
  gl_FragColor = vec4(final, 1.0);
}

The u_rim_power parameter controls how sharp the rim is. Low values (around 1.5) give a wide soft halo. High values (around 5.0) give a thin bright outline. The studios slider maps to this directly.

1. Open the orb editor. Visit the free orb gradient generator. The canvas opens with a default glowing sphere centred on the canvas.
2. Set orb size and position. Adjust radius (small for icons, large for heroes) and centre position on the canvas. Off-centre orbs can create more dynamic compositions.
3. Pick the palette and tune rim glow. Add 2 to 4 colours that flow across the orb surface. Adjust rim intensity and falloff for the atmospheric edge effect; subtle rim reads as solid sphere, intense rim reads as energy ball.
4. Export. PNG up to 8K. Square exports (1024 by 1024 or 1200 by 1200) work well for iOS and Android app icons. Animated MP4 on Pro plans.

App icons are one of the highest-value use cases for orb gradients. iOS and Android icons live in a 1024 by 1024 square, and the viewer sees them at sizes from 60 pixels (small notification) to 512 pixels (App Store listing). The visual treatment needs to read clearly at every size.

Orb gradients work especially well at icon sizes because:

• The spherical shape fills the square cleanly when sized to fit.
• The rim glow gives depth at any zoom level, including the smallest sizes where details disappear.
• The colour palette can match brand colours without needing a complex composition.
• The visual reads as premium at first glance, which matters for App Store conversion.

Recommended workflow:

1. Open the studio canvas at 1024 by 1024 (square).
2. Set orb radius to roughly 40 percent of the canvas width. Orb fills most of the icon but leaves clean rounded-corner padding.
3. Pick a palette matching your brand colours. Two to three related tones works best at icon sizes.
4. Set rim glow to moderate intensity. Too subtle and the orb reads as flat at small icon sizes.
5. Export PNG at 1024 by 1024.
6. In Figma or Photoshop, overlay your logo mark on top. Keep the mark small (no more than 40 percent of orb width) so the orb gradient stays the dominant visual.

For iOS app icons specifically, Apple now generates the rounded-corner mask automatically, so you can export a square PNG. For Android adaptive icons, export the orb on a transparent background at 432 by 432 and let the Android system handle masking.

Real WebGL rim shading cannot be reproduced in CSS, but for decorative orbs at small sizes, radial-gradient with box-shadow gets you close:

.orb {
  width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #ff7eb3 0%,
    #ff65a3 40%,
    #b91c5c 75%,
    #4a0e2c 100%
  );
  box-shadow:
    inset 0 0 60px rgba(255, 200, 220, 0.4),
    0 0 80px rgba(255, 120, 180, 0.5);
}

The off-centre radial-gradient gives the orb directional lighting; the inset box-shadow simulates rim glow at the edges; the outer box-shadow simulates atmospheric bloom into the surrounding background. The result works at icon sizes and as a small decorative element.

For full-size hero orbs and pixel-perfect rim shading, export from the studio. The CSS version works for small accents but breaks down visually at larger sizes because the rim math is not actually correct.

• App icon hero images. The dominant use case. iOS, Android, macOS, and visionOS app icons.
• Sci-fi and fantasy book covers. Planet-style orbs work as cover hero elements.
• AI product marketing. Especially for AI assistants and chat products where the orb reads as the AI itself.
• Planet and cosmic imagery. Astronomy, space-themed marketing, NASA-adjacent design.
• Music album art. Especially for electronic, ambient, and experimental genres.
• Product launch teaser pages. A glowing orb on a dark background, with a coming-soon countdown, is a recognisable launch-teaser format.
• Onboarding flow screens. Single hero illustration for splash screens; the orb reads as energy or potential.
• Conference key art for tech events. Particularly AI and emerging-tech conferences.

• Apple Intelligence: the Siri-style orb visual that appears during AI interactions across iOS, macOS, and visionOS.
• OpenAI: the GPT-5 launch site used a large central orb gradient as the hero visual.
• Humane AI Pin (post-2024): pricing and onboarding pages featured orb visuals.
• Rabbit r1: product marketing leans heavily on a single glowing orb for the AI assistant identity.
• Pi.ai (Inflection): the conversational AI assistants brand identity centres on a soft orb visual.
• Cron Calendar (acquired by Notion): app icon used a chrome-style orb gradient.
• Granola: meeting-notes AI uses an orb as both app icon and product identity.

1. Rim glow too intense. Maximum rim intensity reads as cartoonish or as 90s video game. Keep rim moderate for premium use.
2. Centre too washed out. The centre of the orb should have visible colour, not just pale highlight. Adjust palette so the brightest colour sits off-centre rather than at the centre point.
3. Too many palette colours. 5 plus colours create muddy transitions on the curved surface. Stick to 2 to 4 related tones.
4. Pure black background. Pure #000 makes the rim glow look unmoored. Use deep navy or near-black with subtle tint so the rim has something to fade into.
5. Orb too small in icon context. If the orb does not fill at least 60 percent of the icon canvas, the icon reads as having empty space around a small dot. Make the orb dominate the composition.
6. Inconsistent orb across brand assets. If you use orbs on app icon, hero, and product card, they should look like the same orb (same palette, similar rim intensity). Inconsistency breaks brand recognition.