content/snippets/css/s/25-css-gradients.md
---
title: 25 CSS gradients for your next project
shortTitle: CSS gradients
type: cheatsheet
language: css
tags: [visual,cheatsheet]
cover: colors-mural
excerpt: I hand picked 25 of my favorite CSS gradients from uiGradients for your next design. Get them now!
dateModified: 2024-01-12
---
[uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are my top picks in case you're looking for some color:
<style>
.gradient-box {
grid-column: 1 / -1;
width: 100%;
height: 144px;
border-radius: var(--layout-border-radius) var(--layout-border-radius) 0 0;
margin-top: var(--layout-row-spacing);
}
.gradient-box + pre {
margin-block-start: calc(-1 * var(--layout-row-spacing, 0));
border-radius: 0 0 var(--layout-border-radius) var(--layout-border-radius);
}
.stripe {
background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}
.flare {
background: linear-gradient(to right, #f12711, #f5af19);
}
.vanusa {
background: linear-gradient(to right, #da4453, #89216b);
}
.sublime-light {
background: linear-gradient(to right, #fc5c7d, #6a82fb);
}
.bighead {
background: linear-gradient(to right, #c94b4b, #4b134f);
}
.velvet-sun {
background: linear-gradient(to right, #e1eec3, #f05053);
}
.relay {
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}
.crystal-clear {
background: linear-gradient(to right, #159957, #155799);
}
.celestial {
background: linear-gradient(to right, #c33764, #1d2671);
}
.ibiza-sunset {
background: linear-gradient(to right, #ee0979, #ff6a00);
}
.fresh-turboscent {
background: linear-gradient(to right, #f1f2b5, #135058);
}
.cheer-up-emo-kid {
background: linear-gradient(to right, #556270, #ff6b6b);
}
.starfall {
background: linear-gradient(to right, #f0c27b, #4b1248);
}
.nelson {
background: linear-gradient(to right, #f2709c, #ff9472);
}
.forever-lost {
background: linear-gradient(to right, #5d4157, #a8caba);
}
.blurry-beach {
background: linear-gradient(to right, #d53369, #cbad6d);
}
.influenza {
background: linear-gradient(to right, #c04848, #480048);
}
.calm-darya {
background: linear-gradient(to right, #5f2c82, #49a09d);
}
.titanium {
background: linear-gradient(to right, #283048, #859398);
}
.pinky {
background: linear-gradient(to right, #dd5e89, #f7bb97);
}
.purple-paradise {
background: linear-gradient(to right, #1d2b64, #f8cdda);
}
.horizon {
background: linear-gradient(to right, #003973, #e5e5be);
}
.noon-to-dusk {
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
}
.jshine {
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
.argon {
background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
}
</style>
<div class="gradient-box stripe"></div>
```css
.stripe {
background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}
```
<div class="gradient-box flare"></div>
```css
.flare {
background: linear-gradient(to right, #f12711, #f5af19);
}
```
<div class="gradient-box vanusa"></div>
```css
.vanusa {
background: linear-gradient(to right, #da4453, #89216b);
}
```
<div class="gradient-box sublime-light"></div>
```css
.sublime-light {
background: linear-gradient(to right, #fc5c7d, #6a82fb);
}
```
<div class="gradient-box bighead"></div>
```css
.bighead {
background: linear-gradient(to right, #c94b4b, #4b134f);
}
```
<div class="gradient-box velvet-sun"></div>
```css
.velvet-sun {
background: linear-gradient(to right, #e1eec3, #f05053);
}
```
<div class="gradient-box argon"></div>
```css
.argon {
background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
}
```
<div class="gradient-box celestial"></div>
```css
.celestial {
background: linear-gradient(to right, #c33764, #1d2671);
}
```
<div class="gradient-box relay"></div>
```css
.relay {
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}
```
<div class="gradient-box crystal-clear"></div>
```css
.crystal-clear {
background: linear-gradient(to right, #159957, #155799);
}
```
<div class="gradient-box ibiza-sunset"></div>
```css
.ibiza-sunset {
background: linear-gradient(to right, #ee0979, #ff6a00);
}
```
<div class="gradient-box fresh-turboscent"></div>
```css
.fresh-turboscent {
background: linear-gradient(to right, #f1f2b5, #135058);
}
```
<div class="gradient-box cheer-up-emo-kid"></div>
```css
.cheer-up-emo-kid {
background: linear-gradient(to right, #556270, #ff6b6b);
}
```
<div class="gradient-box starfall"></div>
```css
.starfall {
background: linear-gradient(to right, #f0c27b, #4b1248);
}
```
<div class="gradient-box nelson"></div>
```css
.nelson {
background: linear-gradient(to right, #f2709c, #ff9472);
}
```
<div class="gradient-box forever-lost"></div>
```css
.forever-lost {
background: linear-gradient(to right, #5d4157, #a8caba);
}
```
<div class="gradient-box blurry-beach"></div>
```css
.blurry-beach {
background: linear-gradient(to right, #d53369, #cbad6d);
}
```
<div class="gradient-box influenza"></div>
```css
.influenza {
background: linear-gradient(to right, #c04848, #480048);
}
```
<div class="gradient-box jshine"></div>
```css
.jshine {
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
```
<div class="gradient-box calm-darya"></div>
```css
.calm-darya {
background: linear-gradient(to right, #5f2c82, #49a09d);
}
```
<div class="gradient-box titanium"></div>
```css
.titanium {
background: linear-gradient(to right, #283048, #859398);
}
```
<div class="gradient-box pinky"></div>
```css
.pinky {
background: linear-gradient(to right, #dd5e89, #f7bb97);
}
```
<div class="gradient-box purple-paradise"></div>
```css
.purple-paradise {
background: linear-gradient(to right, #1d2b64, #f8cdda);
}
```
<div class="gradient-box horizon"></div>
```css
.horizon {
background: linear-gradient(to right, #003973, #e5e5be);
}
```
<div class="gradient-box noon-to-dusk"></div>
```css
.noon-to-dusk {
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
}
```