# Background Fillers

No, not like what you get in most hotdogs. These are the patterns and colors for a cell fill.

There are two possible types of fill. A pattern fill and a gradient fill. These two types take different instructions.

The pattern fill requires a pattern type (or solid, if one just wants a solid background color). It also requires a foreground and background color. The trick to remember is that a foreground color is for the pattern (or in the case of a solid background, the actual color you want the background to be). The background color is for whatever the pattern goes on top of.

A gradient fill requires a `degree` (or if no degree, a `left`, `right`, `top` and `bottom`). Then, the start and end instructions. The start and end instructions can be simple colors, by which EB will just assume that you want the start color to be pure at 'zero' (i.e. the beginning) and the end color to be pure at the 'one' (i.e. the end). In the example below, I want the end color to be pure 80% into the cell.

**Note:** HTML color requires the `#` prefix to be escaped as `FF`, for example the HTML color `#0000FF` (blue) must be converted to `FF0000FF`

```ts
import { ExcelBuilder } from 'excel-builder-vanilla';

const artistWorkbook = createWorkbook();
const albumList = artistWorkbook.createWorksheet({ name: 'Album List' });
const stylesheet = artistWorkbook.getStyleSheet();

const blue = 'FF0000FF';
const header = stylesheet.createFormat({
  font: {
    bold: true,
    color: blue,
  },
  fill: {
    type: 'pattern',
    patternType: 'solid',
    fgColor: 'FF00FF00',
  },
});

const artistNameFormat = stylesheet.createFormat({
  font: {
    color: 'FFFFFFFF',
  },
  fill: {
    type: 'gradient',
    degree: 180,
    start: 'FF92D050',
    end: { pureAt: 0.8, color: 'FF0070C0' },
  },
});

const originalData = [
  [
    { value: 'Artist', metadata: { style: header.id } },
    { value: 'Album', metadata: { style: header.id } },
    { value: 'Price', metadata: { style: header.id } },
  ],
  [{ value: 'Buckethead', metadata: { style: artistNameFormat.id } }, 'Albino Slug', 8.99],
  [{ value: 'Buckethead', metadata: { style: artistNameFormat.id } }, 'Electric Tears', 13.99],
  [{ value: 'Buckethead', metadata: { style: artistNameFormat.id } }, 'Colma', 11.34],
  [{ value: 'Crystal Method', metadata: { style: artistNameFormat.id } }, 'Vegas', 10.54],
  [{ value: 'Crystal Method', metadata: { style: artistNameFormat.id } }, 'Tweekend', 10.64],
  [{ value: 'Crystal Method', metadata: { style: artistNameFormat.id } }, 'Divided By Night', 8.99],
];

albumList.setData(originalData);
albumList.setColumns([{ width: 30 }, { width: 20 }, { width: 10 }]);

artistWorkbook.addWorksheet(albumList);

const data = createExcelFile(artistWorkbook);
downloader('Artist WB.xlsx', data);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ghiscoding.gitbook.io/excel-builder-vanilla/cookbook/background-fillers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.