PaletteCSS
Back to gradients
#5C258D
Light
#4389A2
Dark

CSS Code

background: linear-gradient(225deg, #5C258D 0%, #4389A2 100%);

Midnight 7

LINEAR 225°
613 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions diagonally from top-right to bottom-left, moving from Violet #5C258D at the start to Teal #4389A2 at the end. Both ends are cool tones, so the blend reads as calm, fresh and modern.

The colours

The gradient is built from Violet (#5C258D), Teal (#4389A2). Violet is a balanced mid-tone that works well for primary surfaces and UI elements. Teal 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 diagonally from top-right to bottom-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 Teal end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(225deg, #5C258D 0%, #4389A2 100%) value and apply it to any element with the background property, for example: background: linear-gradient(225deg, #5C258D 0%, #4389A2 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 225 degrees, so the colour transitions along a straight line diagonally from top-right to bottom-left.

Can I change the colours or direction?

Yes. The two hex stops (#5C258D and #4389A2) 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!