# Presets
Canned styles for your interface elements.
{
Presets are pre-defined styles that allow you to quickly and easily style buttons, badges, cards, and more. Create by mixing Skeleton and
Tailwind primitives.
}
```html
1
2
3
4
5
6
7
8
```
1. **Filled** - a filled preset of the primary brand color.
2. **Tonal** - a tonal preset of the primary brand color.
3. **Outlined** - an outlined preset of the primary brand color.
4. **Glass** - a custom preset using background transparency and backdrop blur.
5. **Elevated** - mixes a filled preset with a shadow.
6. **Ghost** - has no style by default, but shows a tonal preset on hover.
7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
8. **Gradient** - a custom preset generated using Tailwind gradient primitives.
## Skeleton Presets
Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors.
### Filled
```
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```
```html
```
## Custom Presets
Consider these best practices when creating presets:
- Custom presets are only limited by your imagination.
- Use any combination of Skeleton or Tailwind-provided primitive to generate a preset.
- Apply presets to any relevant element, including: buttons, cards, inputs, and more.
- Use a set naming convention, such as `preset-{foo}` to keep things standardized.
- Implement all presets in using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your global stylesheet.
- Abstrast presets to a stylesheet or NPM package for shared used between projects.
Please be aware the following presets are not included by Skeleton. Rather, these are examples of how you might utilize the Preset pattern.
### Input Presets
```html
```
### Gradient Presets
Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes that can be used to generate presets.
```html