# Silk gradients: smooth folds of light and colour

[Canonical HTML page](https://gradiently.design/guide/silk-gradient)

Silk is one of the few materials people recognise from light alone. Get the folds and the sheen right and a flat screen starts to feel expensive. These are the colours and the structure behind it.

## The short version

- A silk gradient imitates draped fabric with long, soft folds, narrow bright highlights on each ridge and deep, coloured shadows in each valley.
- Silk highlights are much narrower than its shadows, and that imbalance is what reads as sheen rather than plain shading.
- Shot silk is woven from two colours of thread, so it shifts hue between highlight and shadow, for example teal in the light and violet in the folds.
- Silk shadows should be a deeper, more saturated version of the fabric colour, never grey.
- Silk gradients suit luxury, beauty, jewellery and wedding work because the material itself signals care and expense.

A **silk gradient** imitates draped fabric: long folds of colour, each with a narrow, bright highlight along its ridge and a soft, deep shadow in its valley. That pattern of thin light and broad shade is what the eye reads as sheen. It is a material look rather than a colour look, which is why the same champagne or emerald can feel flat as a plain blend and luxurious as silk. You need three things: a fabric colour, a highlight that is lighter and slightly warmer, and a shadow that is deeper and more saturated.

## How silk catches light

Silk fibres are smooth and slightly prism shaped, so they reflect light in a focused way. A fold in silk produces a quick, sharp highlight where it faces the light and a long, gentle roll into shadow. Matte cotton in the same fold would give a broad, dull gradient with no sharp peak. Copy these properties and any colour starts to read as silk.

| Part of a fold | How it looks | In your gradient |
| --- | --- | --- |
| Ridge highlight | Thin, bright, almost white | A narrow stop, 2 to 4 percent wide |
| Shoulder | The true fabric colour | Wide band either side of the highlight |
| Valley shadow | Deep, saturated, soft edged | The widest band, darker and richer |
| Bounce light | A faint lift inside the valley | A slightly lighter stop in the shadow |

One fold, broken down. Repeat it at uneven widths across the frame and you have drapery.

## Silk gradient codes

Each of these is one linear gradient with folds built in: unequal bands, sharp highlights and broad shadows. They work as backgrounds on their own, and as the base for the layered version further down.

- Champagne silk: `linear-gradient(115deg, #6b4f2a 0%, #c8a46a 18%, #f7ead0 23%, #b8925a 30%, #5a3f1e 48%, #a8844f 62%, #efdcb6 66%, #8c6a3a 74%, #4a3216 100%)`
- Emerald silk: `linear-gradient(110deg, #022c22 0%, #047857 20%, #a7f3d0 25%, #059669 32%, #013d2c 52%, #065f46 66%, #6ee7b7 70%, #064e3b 78%, #011c15 100%)`
- Midnight silk: `linear-gradient(120deg, #0b1026 0%, #1e2a5a 20%, #9fb3e8 25%, #26346e 32%, #070b1c 52%, #1c2752 66%, #7d93d4 70%, #151d40 78%, #05070f 100%)`
- Rose silk: `linear-gradient(115deg, #7a2e3e 0%, #d97a8c 20%, #fde4e8 24%, #c8607a 31%, #5e1f2e 50%, #b85068 64%, #f8c8d2 68%, #8e3348 76%, #4a1622 100%)`
- Oxblood silk: `linear-gradient(118deg, #3a0d0d 0%, #9b1c1c 20%, #f8b4b4 24%, #b91c1c 31%, #2b0808 52%, #7f1d1d 66%, #fca5a5 70%, #5c1212 78%, #1f0505 100%)`
- Ivory silk: `linear-gradient(115deg, #e7e5e4 0%, #f5f5f4 20%, #ffffff 24%, #d6d3d1 31%, #a8a29e 50%, #d6d3d1 64%, #fafaf9 68%, #c4bfbb 76%, #9c9692 100%)`

Six silks with two folds each. The highlight stops are only four percent wide; widen them and the sheen turns into a plain stripe.

Keep the angle between 100 and 125 degrees so the folds fall diagonally, like fabric hanging from one corner. A perfectly vertical fold looks like a curtain; a horizontal one looks like a ribbon. Dark silks such as midnight and oxblood are the most forgiving, because shadow hides any awkward joins. They pair naturally with gold type, as in [black and gold gradients](https://gradiently.design/guide/black-and-gold-gradient).

## Shot silk: two colours in one fabric

Shot silk, also called changeant silk, is woven with one colour of thread running lengthwise and another running across. As the fabric turns, you see more of one or the other, so it shifts hue between light and shadow. It is the most striking silk to imitate, and it only takes one change: use one hue for the highlights and shoulders, and a different hue for the valleys.

- Teal highlight: #99f6e4
- Teal shoulder: #14b8a6
- Violet fold: #6d28d9
- Violet shadow: #2e1065

A teal and violet shot silk. Light reads teal, shadow reads violet, and the middle shimmers between them.

Shot silk, teal and violet: `linear-gradient(115deg, #2e1065 0%, #14b8a6 19%, #ccfbf1 23%, #2dd4bf 28%, #6d28d9 40%, #2e1065 52%, #0f766e 64%, #99f6e4 68%, #5b21b6 78%, #1e0a45 100%)`

The hue change happens on the slope into each fold. Pair colours that blend through a clean middle, such as teal and violet or gold and rose.

## How to build silk folds in CSS

A single linear gradient gives parallel folds, which looks like pleated fabric. Real drapery curves. Layer two gradients at slightly different angles, one with soft light and one with the folds, and add a large radial shadow so one side falls away. The result reads as fabric that hangs.

```css
.silk {
  min-height: 100vh;
  background-color: #4a3216;
  background-image:
    radial-gradient(ellipse 70% 90% at 85% 100%, rgba(40, 24, 8, 0.65) 0%, transparent 70%),
    linear-gradient(100deg, transparent 30%, rgba(255, 246, 225, 0.35) 38%, transparent 44%),
    linear-gradient(115deg, #6b4f2a 0%, #c8a46a 18%, #f7ead0 23%, #b8925a 30%,
      #5a3f1e 48%, #a8844f 62%, #efdcb6 66%, #8c6a3a 74%, #4a3216 100%);
}
```

Champagne silk with a second, crossing sheen and a deep shadow pooling at the bottom right.

> **Grain makes it fabric** A very fine noise layer at 2 to 4 percent opacity suggests the weave and stops the folds looking like plastic. Keep it finer than you would for paper. [Gradient texture](https://gradiently.design/guide/gradient-texture) compares the options.

## Silk vs satin, liquid and chrome gradients

| Look | Highlight | Shadow | Feels like |
| --- | --- | --- | --- |
| Silk | Thin, bright, warm | Broad, rich, coloured | Quiet luxury |
| Satin | Wider and glossier | Shorter, sharper | Evening wear, bold |
| [Liquid](https://gradiently.design/guide/liquid-gradient) | Thin lines along swirls | Bands of colour | Poured paint, energy |
| Chrome | Pure white, very hard | Near black, hard | Machines, Y2K, tech |

Four glossy looks. The width and hardness of the highlight decides which material the eye sees.

## Where silk gradients work best

Silk signals care, which makes it right for jewellery, fragrance, skincare, bridal, hotels and premium launches. Pair it with a refined serif or a light, wide sans, and keep the words few. Champagne and ivory suit weddings; emerald, midnight and oxblood suit evening and luxury. [Luxury colour palettes](https://gradiently.design/guide/luxury-color-palettes) and [wedding colour palettes](https://gradiently.design/guide/wedding-color-palettes) have more pairings.

A portrait fragrance announcement with a small refined headline on a deep silk gradient

A fragrance post at 1080×1350, words centred on a calm shoulder of the fabric.

A wedding save the date card with names set on a pale ivory silk background

A 5×7 in invitation at 1500×2100, ivory silk with the names in the calmest band.

### Looks like plastic

- Highlights as wide as the shadows
- Grey shadows
- Perfectly parallel folds
- No grain, so it reads as a render

### Looks like silk

- Narrow, bright highlights
- Shadows that deepen the fabric colour
- Folds that cross and curve
- A whisper of fine grain

Gradiently's Marks stack up to three materials with their own light and grain, so a surface can carry depth and sheen without building folds by hand. Each renders at full quality in every size you design in, from an invitation to a Story, and keeps the area behind your words calm. Browse the Market by colour words such as "champagne" or "emerald".

## FAQ

### How do I make a silk gradient?

Use a linear gradient with uneven bands: narrow, near white highlights, wide bands of the fabric colour and broad, deeper shadows. Layer a second sheen at a slightly different angle for curved drapery.

### What colours look best as silk?

Champagne, ivory, emerald, midnight blue, rose and oxblood all read well because they have a clear light and dark version. Very pale pastels need extra shadow depth.

### What is shot silk?

Silk woven with two colours of thread, so it shifts hue as it moves. In a gradient, use one hue for the highlights and another for the shadows.

### What is the difference between silk and satin gradients?

Satin has wider, glossier highlights and shorter, sharper shadows. Silk has thin, bright highlights and broad, rich shadows, which reads as quieter.