---
title: "Gradient atom | GoodBarber's Design System"
description: "This constitutional object of the [background component](/uxdesign/background/) produces a gradient."
canonical_url: "https://www.goodbarber.com/uxdesign/atom-gradient/"
lang: pt
---

# Gradient atom | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Gradient atom

Atomic Components

The gradient atom is a fundamental element of the [background component](/uxdesign/background/) responsible for creating a gradient.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_gradient.8172e4e20ee0.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_gradient.8172e4e20ee0.mp4)

![Gradients example](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Gradient.cdb86da1c7aa.gif)

*Gradients example*

### JSON

Here’s the JSON format of this object :

```
{

 "colors": LIST OF COLOR OBJECTS,

 "enabled": BOOL,

 "endPoint": { // Used only for axial value

  "x": FLOAT, // Between 0 & 1,

  "y": FLOAT // Between 0 & 1

 },

 "name": STRING,

 "type": { "axial", "radial" }, // Default value "axial",

 "startPoint": {

  "x": FLOAT, // Between 0 & 1,

  "y": FLOAT, // Between 0 & 1

 }

}
```

This JSON format describes the gradient atom. The gradient atom has several properties, including:

"colors": a list of color objects that define the gradient.
"enabled": a boolean value that indicates whether the gradient is enabled or not.
"endPoint": an object that defines the end point of the gradient, used only for axial gradients. It has two properties, "x" and "y", which are floats between 0 and 1 that represent the horizontal and vertical positions of the end point.
"name": a string that gives the gradient a name.
"type": the kind of gradient, either "axial" or "radial" (default "axial"). An axial gradient runs in a straight line from the start point to the end point. A radial gradient radiates outward from a center, which is defined by the start point.
"startPoint": an object that defines the start point of the gradient. It has two properties, "x" and "y", which are floats between 0 and 1 that represent the horizontal and vertical positions of the start point. For a radial gradient, the start point is the center from which the gradient radiates.