PaletteCSS
Back to gradients
#E2B0FF
Light
#9F44D3
Dark

CSS Code

background: linear-gradient(270deg, #E2B0FF 0%, #9F44D3 100%);

Twilight 47

LINEAR 270°
4,054 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from right to left, moving from Light Violet #E2B0FF at the start to Violet #9F44D3 at the end. Both ends are cool tones, so the blend reads as calm, fresh and modern.

The colours

The gradient is built from Light Violet (#E2B0FF), Violet (#9F44D3). Light Violet is a light, airy tone — ideal for backgrounds and subtle fills. Violet is a balanced mid-tone that works well for primary surfaces and UI elements.

Where to use it

This linear gradient suits hero sections, call-to-action buttons, cards and section dividers. Because the colour travels from right to left, it pairs naturally with content laid out along the same axis, guiding the eye through the design. Use it full-width for impact or as a subtle button background.

Text & accessibility

The colours are close in tone, so this gradient works best as a decorative background rather than behind small text. If you do place text over it, use a solid overlay or pick text colour that clears the 4.5:1 WCAG contrast ratio against the Violet end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #E2B0FF 0%, #9F44D3 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #E2B0FF 0%, #9F44D3 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 270 degrees, so the colour transitions along a straight line from right to left.

Can I change the colours or direction?

Yes. The two hex stops (#E2B0FF and #9F44D3) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(270deg, #A18CD1 0%, #FBC2EB 100%)

Midnight 50

linear 270°
linear-gradient(45deg, #3494E6 0%, #EC6EAD 100%)

Bloom 20

linear 45°
linear-gradient(225deg, #4776E6 0%, #8E54E9 100%)

Flux 42

linear 225°
linear-gradient(135deg, #E2B0FF 0%, #9F44D3 100%)

Peach Fuzz 17

linear 135°
linear-gradient(270deg, #2BC0E4 0%, #EAECC6 100%)

Tone Fade 26

linear 270°
linear-gradient(45deg, #4CA1AF 0%, #C4E0E5 100%)

Moon Glow 20

linear 45°
linear-gradient(150deg, #3494E6 0%, #EC6EAD 100%)

Cherry Blossom 50

linear 150°
linear-gradient(45deg, #4776E6 0%, #8E54E9 100%)

Sunrise 2

linear 45°
linear-gradient(225deg, #5C258D 0%, #4389A2 100%)

Ripple 27

linear 225°
linear-gradient(135deg, #373B44 0%, #4286F4 100%)

Neon City 35

linear 135°
linear-gradient(135deg, #1CB5E0 0%, #000851 100%)

Twilight 48

linear 135°
linear-gradient(135deg, #1CB5E0 0%, #000851 100%)

Tone Fade 18

linear 135°
linear-gradient(150deg, #2C3E50 0%, #4CA1AF 100%)

Golden Hour 43

linear 150°
linear-gradient(225deg, #C9D6FF 0%, #E2E2E2 100%)

Sunrise 37

linear 225°
linear-gradient(270deg, #1CB5E0 0%, #000851 100%)

Pulse 18

linear 270°
linear-gradient(135deg, #4568DC 0%, #B06AB3 100%)

Flux 45

linear 135°
linear-gradient(90deg, #C9D6FF 0%, #E2E2E2 100%)

Purple Rain 17

linear 90°
linear-gradient(90deg, #3C3B3F 0%, #605C3C 100%)

Twilight 26

linear 90°
linear-gradient(270deg, #4776E6 0%, #8E54E9 100%)

Aurora 32

linear 270°
linear-gradient(90deg, #4CA1AF 0%, #C4E0E5 100%)

Chroma Flow

linear 90°
linear-gradient(135deg, #2BC0E4 0%, #EAECC6 100%)

Peach Fuzz 26

linear 135°
linear-gradient(150deg, #134E5E 0%, #71B280 100%)

Vortex 25

linear 150°
linear-gradient(135deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%)

Color Drift 11

linear 135°
linear-gradient(225deg, #005C97 0%, #363795 100%)

Winter Frost 2

linear 225°
Copied!