Angular and Diamond Gradients are advanced gradient types in Figma that help designers create dynamic color transitions, decorative backgrounds, modern UI elements, illustrations, cards, buttons, and visual effects. Figma provides four main gradient types: Linear, Radial, Angular, and Diamond. Angular gradients transition colors around a central point, while Diamond gradients create a diamond-shaped transition that expands from the center toward the edges.
Gradients can be applied to fills and strokes, and Figma allows designers to customize color stops, positions, opacity, orientation, and other properties directly on the canvas. Official Figma documentation describes Angular gradients as progressing clockwise from a starting position and Diamond gradients as beginning at the center with independently adjustable width and height. :contentReference[oaicite:0]{index=0}
Learn professional UI/UX design with JustAcademy Figma Training and Register for Figma Course Demo.
An Angular Gradient is a gradient that distributes colors around a central point in a circular or rotational direction. Instead of moving from left to right like a linear gradient or from the center outward like a radial gradient, an angular gradient changes color progressively around the center.
Angular Gradient
↓
Color transition around a center point
↓
Clockwise / rotational appearance
↓
Useful for colorful circular interfaces and effects
Angular gradients are especially useful for creating color wheels, circular progress visuals, decorative backgrounds, futuristic interfaces, colorful rings, illustrations, and abstract UI backgrounds.
A Diamond Gradient is a gradient that starts from the center of an object and transitions outward in a diamond-shaped pattern. Unlike a radial gradient, which creates a circular transition, a diamond gradient produces a more geometric transition.
Diamond Gradient
↓
Starts from the center
↓
Expands horizontally and vertically
↓
Creates a diamond-shaped transition
↓
Useful for geometric and modern UI designs
Figma's gradient documentation identifies Diamond as one of its four standard gradient types and explains that it starts in the center of the object, with width and height adjustable independently. :contentReference[oaicite:1]{index=1}
| Feature | Angular Gradient | Diamond Gradient |
|---|---|---|
| Direction | Rotational / clockwise | Center outward |
| Shape | Circular or angular transition | Diamond-shaped transition |
| Center Point | Important for rotation | Important starting point |
| Best For | Color wheels, rings, abstract effects | Geometric backgrounds and cards |
| Visual Style | Dynamic and colorful | Geometric and structured |
| Common UI Use | Progress indicators, illustrations, decorative backgrounds | Cards, hero sections, tiles, buttons |
Before creating an Angular or Diamond Gradient, select the object to which the gradient will be applied. Figma allows gradients to be used as fills or strokes. :contentReference[oaicite:2]{index=2}
To create an Angular Gradient, select an object and change its fill from Solid to Angular. Figma then provides gradient controls that allow you to adjust the center, direction, and color stops.
Gradient handles control the position and dimensions of a gradient within an object. Figma's gradient data model represents gradient handle positions in normalized object space, allowing the gradient to be positioned relative to the object's bounds. :contentReference[oaicite:3]{index=3}
Color Stop
●
/
/
● Center
/ \
/ \
● ●
Gradient Control Area
Moving the handles changes how the colors are distributed across the object.
The center point determines where the angular color rotation originates. Moving the center can dramatically change the visual result.
Center in Middle
+----------------+
| |
| ● |
| |
+----------------+
Center Near Corner
+----------------+
| ● |
| |
| |
+----------------+
A centered gradient usually produces a balanced effect, while an offset center can create a more dynamic composition.
Color stops determine which colors appear at different positions within the gradient. Figma starts gradients with two color stops, and additional stops can be added for more complex transitions. :contentReference[oaicite:4]{index=4}
Color 1 Color 2 Color 3 Color 4
●-------------●-------------●-------------●
0% 30% 65% 100%
Adding more color stops allows designers to create richer and more expressive angular gradients.
A two-color angular gradient is useful when you want a clean rotational transition without excessive visual complexity.
Color A: #2563EB
Color B: #7C3AED
Result:
Blue → Purple → Blue
around the center point
This approach works well for buttons, cards, icons, and simple decorative backgrounds.
Adding multiple colors can create a vibrant and energetic appearance.
Color Stops:
#2563EB
#7C3AED
#EC4899
#F97316
#FACC15
Multi-color gradients are particularly useful for creative landing pages, illustrations, social media graphics, and experimental interfaces.
Angular gradients are naturally suited to circular color-wheel concepts because colors transition around a central point.
RED
|
PURPLE ● ORANGE
/ \
BLUE YELLOW
|
GREEN
You can use an ellipse or circle and apply an angular gradient to create a colorful wheel-like visual.
An angular gradient can be combined with a circular shape to create visually attractive progress indicators.
*********
** **
* 75% *
* *
** **
*********
For a real progress indicator, combine the gradient with an appropriate circular stroke, mask, or component structure so the visual percentage remains understandable.
Angular gradients can make buttons visually distinctive, especially in modern SaaS, gaming, creative, and technology interfaces.
+----------------------+
| GET STARTED |
+----------------------+
Angular Fill
Use moderate contrast between colors and ensure that the button label remains readable across the entire surface.
A colorful button can use a combination of blue, purple, and pink tones.
Primary: #2563EB
Secondary: #7C3AED
Accent: #EC4899
Button:
[ Get Started ]
Keep typography strong and avoid using too many bright colors behind small text.
Angular gradients can be used subtly inside cards to create depth without requiring photographs or complex illustrations.
+-----------------------------+
| |
| Product Card |
| |
| Gradient Background |
| |
| $49 / month |
| |
+-----------------------------+
For professional UI, consider using a low-opacity gradient overlay instead of a highly saturated full-card gradient.
Hero sections often contain large visual areas where gradients can create atmosphere and guide attention toward the primary headline.
+------------------------------------------+
| |
| BUILD BETTER PRODUCTS |
| |
| Modern design platform |
| |
| [ Start Now ] |
| |
+------------------------------------------+
Place the brightest or highest-contrast region near the important content, but verify that the text remains readable.
An angular gradient can be applied to an entire frame to create an abstract background.
Frame
+--------------------------------------+
| Purple Pink Orange |
| \ | / |
| \ | / |
| Angular Gradient |
| |
+--------------------------------------+
Large gradients should generally use carefully selected colors so that the interface does not become visually overwhelming.
A Diamond Gradient starts from the center and transitions toward the edges using a diamond-like geometry. It is useful when a designer wants something more geometric than a radial gradient.
▲
/ \
/ \
/ ● \
/ \
/_________\
Center
expands
toward edges
Figma specifically supports independent adjustment of the Diamond Gradient's width and height, which makes it useful for controlling the geometric proportions of the effect. :contentReference[oaicite:5]{index=5}
The center of a Diamond Gradient acts as the starting region of the transition. A centered position creates a symmetrical appearance.
+----------------------+
| /\ |
| / \ |
| / ● \ |
| \ / |
| \ / |
| \/ |
+----------------------+
Moving the center away from the middle creates an asymmetric effect that can be useful for visual composition.
Width and height influence how far the gradient extends horizontally and vertically. Adjusting them independently allows you to create narrow, wide, tall, or compact diamond effects.
Wide Diamond
/---------\
/ \
/ ● \
\ /
\---------/
Tall Diamond
/\
/ \
/ ● \
\ /
\ /
\/
A simple two-color Diamond Gradient is useful for clean interface backgrounds.
Center: #60A5FA
Edge: #1E3A8A
Light Blue
↓
Center
↓
Dark Blue
This combination can work well for technology dashboards, profile cards, and hero backgrounds.
Purple gradients can create a modern and creative appearance.
Center: #C084FC
Edge: #581C87
Use a softer center and darker edges when creating depth.
A blue Diamond Gradient is suitable for professional dashboards, finance applications, SaaS interfaces, and technology products.
Center: #38BDF8
Mid: #2563EB
Edge: #172554
Diamond gradients can provide geometric depth to cards without introducing additional images.
+----------------------------+
| |
| ● Center |
| / \ |
| / \ |
| / \ |
| |
| Dashboard Card |
+----------------------------+
Keep the gradient subtle when the card contains important text or controls.
Diamond gradients can be used behind large headlines to create a geometric spotlight effect.
+-------------------------------------+
| |
| /---------\ |
| / HEADLINE \ |
| / \ |
| /_______________\ |
| |
+-------------------------------------+
Angular gradients can be applied to icons to create colorful brand accents.
◉
/ | \
/ | \
Angular
Gradient
Icon
For small icons, use a limited number of colors because subtle transitions may become difficult to distinguish at small sizes.
Diamond gradients can be effective for geometric icons, badges, tiles, and abstract symbols.
/\
/ \
/ ● \
\ /
\ /
\/
The geometric appearance works particularly well with square, hexagonal, and diamond-shaped icon systems.
Angular gradients can add color variation to illustrations. Designers can apply the gradient to selected shapes rather than the entire illustration.
Illustration
↓
Separate shapes
↓
Apply Angular Gradient
↓
Adjust color stops
↓
Group illustration
Diamond gradients can add geometric lighting effects to illustrations. They can simulate light coming from the center of a shape and spreading toward its edges.
Light
●
/ \
/ Shape \
/ \
/___________\
Glassmorphism designs often use translucent surfaces, blur, borders, and soft gradients. An Angular Gradient can act as a colorful background behind a translucent glass card.
Background
↓
Angular Gradient
↓
Blurred / translucent layer
↓
Glass Card
↓
Text and controls
Use opacity carefully so the gradient does not reduce text readability.
A Diamond Gradient can be used behind glass cards to create a geometric light source.
+--------------------------+
| Diamond Glow |
| / \ |
| / ● \ |
| \ / |
| \ / |
| Glass Card |
+--------------------------+
An Angular Gradient can be placed above an image using transparency. This is useful for creating color overlays and improving text visibility.
Image
+
Transparent Angular Gradient
+
Text
=
Readable Hero Section
When using multiple fills, pay attention to fill order and opacity so that the image remains visible while the overlay provides sufficient contrast. Figma supports multiple layer fills and allows their order and opacity to be adjusted. :contentReference[oaicite:6]{index=6}
A transparent Diamond Gradient can be positioned behind or above important content to create a focused visual region.
Image
+ Diamond Overlay
+ Headline
+ CTA
Use a low-opacity outer stop to make the gradient blend naturally with the image.
Gradients should support visual hierarchy rather than compete with it. A stronger gradient can attract attention, while a subtle gradient can create atmosphere.
Strong Gradient
↓
Primary Attention
Medium Gradient
↓
Secondary Content
Subtle Gradient
↓
Background / Decoration
Diamond gradients can create a central focus because the transition originates from the center. This makes them useful when the designer wants to draw attention toward a particular region.
Outer Area
↓
Diamond Transition
↓
Bright Center
↓
Primary Content
Color stops define the colors and their positions in the gradient. Additional stops can be added to create smooth or dramatic transitions. Figma allows designers to add, move, and remove gradient stops. :contentReference[oaicite:7]{index=7}
| Stop | Example Color | Purpose |
|---|---|---|
| 0% | #2563EB | Starting color |
| 25% | #7C3AED | Secondary transition |
| 50% | #EC4899 | Accent |
| 75% | #F97316 | Warm transition |
| 100% | #FACC15 | Ending color |
Diamond gradients can also use multiple color stops to create richer geometric transitions.
Center
↓
Blue
↓
Purple
↓
Pink
↓
Dark Edge
Use intermediate stops when a two-color transition appears too harsh.
Opacity is important when creating subtle gradients. A color stop can use transparency to allow the underlying fill or image to remain visible.
Color A
Opacity: 100%
Color B
Opacity: 60%
Color C
Opacity: 0%
Transparent gradient stops are useful for glow effects, overlays, image treatments, and background decorations.
An Angular Gradient combined with opacity and blur can create a colorful glow effect.
Bright Angular Gradient
↓
Lower Opacity
↓
Layer Blur
↓
Soft Color Glow
Keep the glow behind important content to maintain hierarchy.
A Diamond Gradient can create a geometric glow by using a bright center and transparent outer regions.
Center: rgba(96,165,250,0.8)
Edge: rgba(96,165,250,0)
This technique is useful for futuristic interfaces and decorative background elements.
Figma supports using color variables in gradient color stops. This makes it easier to maintain consistent colors across a design system. :contentReference[oaicite:8]{index=8}
Color Variable
↓
Gradient Stop
↓
Angular Gradient
↓
Component
↓
Design System
Variables are useful when multiple screens need to use the same brand colors.
Diamond Gradient stops can also use design-system color variables. This helps maintain consistency when colors are updated across a product.
Brand/Primary
Brand/Secondary
Brand/Accent
↓
Diamond Gradient
↓
Reusable Component
Frequently used gradients can be saved as reusable styles. This reduces repetitive work and helps maintain consistency across screens. Figma supports saving gradients as styles and using variables within gradients. :contentReference[oaicite:9]{index=9}
Gradient Created
↓
Save as Style
↓
Use in Components
↓
Use Across Screens
↓
Consistent Design
Example naming conventions can make gradient libraries easier to manage.
| Style Name | Purpose |
|---|---|
| Gradient/Angular/Primary | Primary brand gradient |
| Gradient/Angular/Accent | Accent UI elements |
| Gradient/Angular/Hero | Hero backgrounds |
| Gradient/Angular/Glow | Decorative glow |
| Style Name | Purpose |
|---|---|
| Gradient/Diamond/Primary | Primary components |
| Gradient/Diamond/Card | Card backgrounds |
| Gradient/Diamond/Hero | Hero backgrounds |
| Gradient/Diamond/Glow | Geometric glow |
Components can contain Angular Gradient fills so that repeated UI elements maintain the same visual treatment.
Component
↓
Gradient Style
↓
Angular Fill
↓
Multiple Instances
↓
Consistent UI
When the gradient is defined as part of a reusable component system, future changes can be managed more efficiently.
Diamond gradients are useful for reusable cards, badges, feature tiles, and decorative components.
Feature Card
↓
Diamond Gradient
↓
Component
↓
Instance 1
Instance 2
Instance 3
Variants can be used to create different visual states of a component.
| Variant | Gradient |
|---|---|
| Default | Blue → Purple |
| Hover | Purple → Pink |
| Active | Pink → Orange |
| Disabled | Low-contrast gradient |
Always make sure state differences are not communicated by color alone.
Diamond gradients can also be included in component variants.
Card
├── Default
├── Hover
├── Selected
└── Disabled
Each variant
↓
Different Diamond Gradient
Auto Layout controls the arrangement and spacing of content, while the gradient acts as a visual fill. Combining both allows responsive components to maintain their structure while using rich backgrounds.
Auto Layout Frame
↓
Padding
↓
Content
↓
Angular Gradient Background
The gradient should support the component rather than interfere with its content.
Diamond gradients work well as backgrounds for Auto Layout cards and buttons because the content can resize while the background remains part of the component.
Auto Layout
+-----------------------+
| Icon |
| Title |
| Description |
| Button |
+-----------------------+
↑
Diamond Gradient
Responsive layouts may change size and proportions across desktop, tablet, and mobile screens. Check the gradient at each important breakpoint.
| Screen | Check |
|---|---|
| Desktop | Large gradient composition |
| Tablet | Center and color distribution |
| Mobile | Text contrast and visual density |
Because Diamond Gradients can have different horizontal and vertical dimensions, check their proportions when the object changes size.
Desktop
Wide Diamond
Tablet
Medium Diamond
Mobile
Compact Diamond
Angular gradients can be used in websites for hero sections, navigation accents, feature cards, pricing sections, and decorative backgrounds.
Website
├── Header
├── Hero
│ └── Angular Gradient
├── Features
│ └── Gradient Cards
├── Pricing
└── Footer
Diamond gradients are particularly effective for geometric web layouts and technology-focused designs.
Hero Background
↓
Diamond Gradient
↓
Headline
↓
CTA
↓
Feature Cards
Mobile interfaces can use Angular Gradients for splash screens, onboarding backgrounds, profile cards, buttons, and illustrations.
Mobile Screen
+------------------+
| Angular Gradient |
| |
| Welcome |
| |
| [ Continue ] |
| |
+------------------+
Diamond gradients can be used for mobile cards, feature tiles, onboarding screens, and decorative backgrounds.
+------------------+
| / \ |
| / ● \ |
| \ / |
| \ / |
| |
| Feature |
+------------------+
Create a product card using a Diamond Gradient background.
+--------------------------------+
| Product Image |
| |
| Premium Headphones |
| |
| $149 |
| |
| [ Buy Now ] |
+--------------------------------+
Use an Angular Gradient for the hero background.
Hero
↓
Angular Gradient
↓
Headline
↓
Supporting Text
↓
CTA Buttons
↓
Product Illustration
Use the strongest color contrast near the most important content.
Create a SaaS dashboard with subtle gradient accents.
Dashboard
├── Sidebar
├── Header
├── Revenue Card
│ └── Diamond Gradient
├── User Card
│ └── Angular Accent
└── Analytics Chart
Keep gradients subtle in information-dense interfaces so data remains the primary focus.
Angular and Diamond gradients can create attractive login backgrounds.
+--------------------------------+
| |
| Angular Gradient |
| |
| +----------------+ |
| | Email | |
| | Password | |
| | | |
| | [ Login ] | |
| +----------------+ |
| |
+--------------------------------+
When handing a design to developers, it is useful to understand how gradient concepts may be represented in CSS. CSS commonly represents angular-style gradients using conic-gradient().
background: conic-gradient(
#2563EB,
#7C3AED,
#EC4899,
#F97316,
#2563EB
);
The exact implementation used by a developer can vary depending on the intended design and browser implementation. The Figma design should communicate the visual intent clearly.
CSS does not provide a native function named Diamond Gradient. Developers may recreate a similar appearance using combinations of gradients, positioned backgrounds, pseudo-elements, or other techniques.
.diamond-gradient {
background:
radial-gradient(
diamond at center,
#60A5FA 0%,
#2563EB 50%,
#172554 100%
);
}
The exact CSS syntax and visual result should be tested by the developer because design-tool gradient geometry and browser gradient functions are not always identical.
Layering gradients can create complex backgrounds. Figma supports multiple fills on a layer, allowing designers to combine different paints and adjust their order and opacity. :contentReference[oaicite:10]{index=10}
Base Fill
+
Angular Gradient
+
Diamond Gradient
+
Subtle Overlay
=
Rich Background
Use multiple gradients carefully. Too many layers can make a design visually noisy.
Blend modes can change how gradient colors interact with layers underneath. They can be useful for artistic effects, but should be tested carefully for accessibility and consistency.
Background
↓
Image
↓
Angular Gradient
↓
Blend Mode
↓
Final Visual
A Diamond Gradient can be combined with blend modes to create geometric lighting effects.
Shape
↓
Diamond Gradient
↓
Blend Mode
↓
Highlight / Shadow
↓
Final Shape
Angular gradients can become part of a visual identity when they consistently use a brand's approved colors.
| Brand Element | Possible Gradient Usage |
|---|---|
| Logo | Angular accent |
| Website | Hero background |
| Social Media | Post background |
| Mobile App | Onboarding screen |
| Marketing | Decorative graphics |
Diamond gradients can provide a recognizable geometric language for technology, architecture, gaming, and creative brands.
Brand Colors
↓
Diamond Gradient
↓
Reusable Visual Language
↓
Website + App + Marketing
Gradients should not reduce the readability or usability of an interface. Text placed over an Angular or Diamond Gradient should maintain sufficient contrast across the entire text area.
1. Define visual purpose
↓
2. Select base object
↓
3. Choose Angular Gradient
↓
4. Select color palette
↓
5. Add color stops
↓
6. Position center
↓
7. Adjust transitions
↓
8. Check contrast
↓
9. Test responsive layouts
↓
10. Save as style if reusable
1. Define visual purpose
↓
2. Create/select object
↓
3. Choose Diamond Gradient
↓
4. Select center color
↓
5. Select edge color
↓
6. Adjust width
↓
7. Adjust height
↓
8. Check contrast
↓
9. Test component sizes
↓
10. Save as reusable style
| Method | Advantage | Use Case |
|---|---|---|
| Solid Color | Simple and predictable | Basic UI surfaces |
| Angular Gradient | Dynamic color movement | Creative backgrounds |
| Diamond Gradient | Geometric depth | Cards and decorative surfaces |
| Image | Rich visual detail | Photography and illustrations |
During developer handoff, provide clear information about the gradient's colors, stop positions, opacity, orientation, and intended use.
Design Handoff
↓
Gradient Type
↓
Colors
↓
Color Stops
↓
Opacity
↓
Position
↓
Responsive Behavior
↓
Developer Implementation
Figma's gradient API also represents gradient type, handle positions, and color stops as structured properties, which reinforces the importance of documenting these values when translating designs into code. :contentReference[oaicite:11]{index=11}
Create a modern landing page using both Angular and Diamond Gradients.
Landing Page
│
├── Navigation
│
├── Hero
│ ├── Angular Gradient
│ ├── Diamond Gradient
│ ├── Headline
│ └── CTA
│
├── Features
│ ├── Card 1
│ ├── Card 2
│ └── Card 3
│
└── Footer
Create a dashboard that uses gradients only as supporting visual elements.
Dashboard
│
├── Sidebar
├── Header
├── Revenue
│ └── Diamond Gradient
├── Users
│ └── Angular Gradient Accent
├── Orders
│ └── Gradient Icon
└── Analytics
The primary information should remain readable and understandable even if the gradient is removed.
An Angular Gradient is a gradient that transitions colors around a central point in a rotational direction.
A Diamond Gradient starts at the center of an object and transitions outward using a diamond-shaped geometry.
Angular Gradients transition around a central point, while Diamond Gradients expand outward from the center using a diamond-shaped transition.
They can be used for circular interfaces, hero backgrounds, illustrations, buttons, icons, progress visuals, and decorative elements.
They are useful for cards, geometric backgrounds, illustrations, hero sections, badges, and decorative UI elements.
Yes. Figma supports gradients as fills and strokes. :contentReference[oaicite:12]{index=12}
Gradient stops define the colors and their positions within a gradient.
Yes. Additional color stops can be added to create more complex transitions. :contentReference[oaicite:13]{index=13}
Yes. Figma supports applying color variables to gradient color stops. :contentReference[oaicite:14]{index=14}
Overusing gradients can reduce visual hierarchy, make interfaces noisy, and create accessibility problems when text is placed over changing colors.
Example Answer: Angular and Diamond Gradients are two gradient types available in Figma. Angular Gradient creates a rotational color transition around a central point, while Diamond Gradient creates a geometric transition from the center toward the edges. I would use Angular Gradients for circular, colorful, and dynamic visual effects, and Diamond Gradients for geometric backgrounds, cards, and decorative UI. I would also control color stops, opacity, positioning, and contrast to keep the design consistent and accessible.
| Topic | Remember |
|---|---|
| Angular Gradient | Colors transition around a center |
| Diamond Gradient | Colors transition outward in a diamond shape |
| Color Stop | Controls color and position |
| Opacity | Controls transparency |
| Center | Controls gradient origin |
| Width | Controls horizontal gradient extent |
| Height | Controls vertical gradient extent |
| Variables | Maintain reusable colors |
| Styles | Reuse gradient definitions |
| Accessibility | Maintain readable contrast |
Angular and Diamond Gradients are powerful tools for creating modern and visually expressive Figma designs. Angular Gradients are ideal for rotational and circular color effects, while Diamond Gradients are useful for geometric backgrounds, cards, illustrations, and focused visual highlights. By controlling color stops, center positions, opacity, width, height, and reusable design-system colors, designers can create consistent and professional interfaces.
For structured learning and practical UI/UX design training, explore JustAcademy Figma Training and Register for Figma Course Demo.
