PaletteCSS
Back to gradients
#C94B4B
Light
#4B134F
Dark

CSS Code

background: linear-gradient(270deg, #C94B4B 0%, #4B134F 100%);

Light Burst 20

LINEAR 270°
6,533 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 Red #C94B4B at the start to Dark Pink #4B134F at the end. Both ends sit on the warm side of the spectrum, giving the blend an energetic, sunny feel.

The colours

The gradient is built from Red (#C94B4B), Dark Pink (#4B134F). Red is a balanced mid-tone that works well for primary surfaces and UI elements. Dark Pink is a deep, low-lightness tone — strong for text, headings and bold accents.

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 Dark Pink end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #C94B4B 0%, #4B134F 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #C94B4B 0%, #4B134F 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 (#C94B4B and #4B134F) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Neon City

linear 225°
linear-gradient(225deg, #FF512F 0%, #F09819 100%)

Lavender Dream 13

linear 225°
linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Vortex 29

linear 225°
linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Vortex 29

linear 225°
linear-gradient(90deg, #F7971E 0%, #FFD200 100%)

Hue Shift 24

linear 90°
linear-gradient(270deg, #F12711 0%, #F5AF19 100%)

Wave Form 19

linear 270°
linear-gradient(135deg, #F7971E 0%, #FFD200 100%)

Candy Pop 34

linear 135°
linear-gradient(150deg, #F12711 0%, #F5AF19 100%)

Moon Glow 19

linear 150°
linear-gradient(270deg, #FF416C 0%, #FF4B2B 100%)

Crimson Tide 18

linear 270°
linear-gradient(225deg, #C94B4B 0%, #4B134F 100%)

Mint Breeze 30

linear 225°
linear-gradient(45deg, #E44D26 0%, #F16529 100%)

Spring Bloom 47

linear 45°
linear-gradient(150deg, #DA4453 0%, #89216B 100%)

Color Drift 31

linear 150°
linear-gradient(270deg, #E44D26 0%, #F16529 100%)

Peach Fuzz 7

linear 270°
linear-gradient(270deg, #FF512F 0%, #F09819 100%)

Fade 33

linear 270°
linear-gradient(270deg, #F12711 0%, #F5AF19 100%)

Wave Form 19

linear 270°
linear-gradient(135deg, #C94B4B 0%, #4B134F 100%)

Electric Blue 20

linear 135°
linear-gradient(225deg, #FF512F 0%, #F09819 100%)

Pulse 43

linear 225°
linear-gradient(270deg, #DA4453 0%, #89216B 100%)

Purple Rain 11

linear 270°
linear-gradient(270deg, #F7971E 0%, #FFD200 100%)

Mint Breeze 14

linear 270°
linear-gradient(90deg, #E44D26 0%, #F16529 100%)

Aurora 47

linear 90°
linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%)

Coral Reef 8

linear 45°
linear-gradient(225deg, #FF0099 0%, #FF6600 100%)

Pulse 25

linear 225°
linear-gradient(225deg, #DA4453 0%, #89216B 100%)

Neon City 41

linear 225°
linear-gradient(135deg, #C94B4B 0%, #4B134F 100%)

Electric Blue 20

linear 135°
Copied!