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.
On this page
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.
How it looks
In your gradient
In your gradient
How it looks
In your gradient
How it looks
In your gradient
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.
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.
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.
linear-gradient(115deg, #2e1065 0%, #14b8a6 19%, #ccfbf1 23%, #2dd4bf 28%, #6d28d9 40%, #2e1065 52%, #0f766e 64%, #99f6e4 68%, #5b21b6 78%, #1e0a45 100%)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.
.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%);
}Silk vs satin, liquid and chrome gradients
Shadow
Feels like
Shadow
Feels like
Shadow
Feels like
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 and wedding colour palettes have more pairings.
A fragrance post at 1080×1350, words centred on a calm shoulder of the fabric.
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".
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile