Browse Gradients

Discover beautiful gradients for your next project. Copy CSS code or download gradient files instantly.

Sky Mint

Blue

COLORtastic sky to mint gradient

Colors:

Angle:45°

CSS Code

background: linear-gradient(45deg, #6ACEFC 0%, #95E1D3 100%);

Candy Lemon

Pink

Sweet candy to lemon gradient

Colors:

Angle:45°

CSS Code

background: linear-gradient(45deg, #FFB6D4 0%, #FFE066 100%);

Lavender Sky

Purple

Soft lavender to sky gradient

Colors:

Angle:135°

CSS Code

background: linear-gradient(135deg, #B5B6EF 0%, #6ACEFC 100%);

Mint Energy

Green

Fresh mint to energetic yellow

Colors:

Angle:90°

CSS Code

background: linear-gradient(90deg, #95E1D3 0%, #FFE066 100%);

Pink Dreams

Pink

Dreamy pink to lavender gradient

Colors:

Angle:180°

CSS Code

background: linear-gradient(180deg, #FFB6D4 0%, #B5B6EF 100%);

Ocean Breeze

Blue

Cool ocean-inspired gradient

Colors:

Angle:135°

CSS Code

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Sunset Vibes

Pink

Warm sunset colors

Colors:

Angle:120°

CSS Code

background: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);

Forest Mist

Green

Deep forest greens

Colors:

Angle:45°

CSS Code

background: linear-gradient(45deg, #134e5e 0%, #71b280 100%);

Golden Hour

Orange

Warm golden tones

Colors:

Angle:90°

CSS Code

background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);

Purple Rain

Purple

Rich purple hues

Colors:

Angle:180°

CSS Code

background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);

Arctic Glow

Blue

Cool arctic blues

Colors:

Angle:0°

CSS Code

background: linear-gradient(0deg, #74b9ff 0%, #0984e3 100%);

Fire Ember

Red

Fiery red and pink

Colors:

Angle:45°

CSS Code

background: linear-gradient(45deg, #ff7675 0%, #fd79a8 100%);

Mint Fresh

Green

Fresh mint greens

Colors:

Angle:135°

CSS Code

background: linear-gradient(135deg, #00b894 0%, #55efc4 100%);

Gradient Statistics

Overview of our gradient collection

Total Gradients

How to Use Gradients

Quick guide on implementing gradients in your projects

CSS Implementation

.gradient-element {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tailwind CSS

<div className="bg-gradient-to-r from-blue-500 to-purple-600">
  Your content here
</div>