Simple • Gradient • Combinations
The best combinations arise in constraints.

Created for & optimised for the web, so you can just use the best combinations directly without much work for Carrd.

Linear Gradients →

Radial Colours (Coming Soon)

Try out Carrd now ↓
Why should you try Carrd?

This website only took 2 Hours to make.
Cost me $49/yr for 25 websites.
Get a Free Carrd domain to launch your projects.

Try out Carrd now →

Learn how to make websites like these.
Courses by Nocolo.co

Learn how to build, launch & validate your ideas using first principles.
Build Products using No-Code Tools.
Launch your side hustle, frugally.

#f9d423 → #ff4e50 at 135°

GET THE CSS
background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);

#df89b5 → #bfd9fe at 0°

GET THE CSS
background-image: linear-gradient(to top, #df89b5 0%, #bfd9fe 100%);

#a18cd1 → #fbc2eb at 45°

GET THE CSS
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

#ff9a9e → #fad0c4 at 45°

GET THE CSS
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

#667eea → #764ba2 at 135°

GET THE CSS
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);

#a18cd1 → #fbc2eb at 45°

GET THE CSS
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

#fdfbfb → #ebedee at 120°

GET THE CSS
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);

#a18cd1 → #fbc2eb at 45°

GET THE CSS
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);

#667eea → #764ba2 at 135°

GET THE CSS
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);

#a18cd1 → #fbc2eb at 0°

GET THE CSS
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%);

#6a11cb → #2575fc at 180°

GET THE CSS
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);

#667eea → #764ba2 at 135°

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

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);

Add only via CSS Styles

GET THE CSS
background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
background-blend-mode: multiply;

Add only via CSS Styles

GET THE CSS
background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);

Radial • Gradient • Combinations
Simple radial gradient combinations.

Radial Gradient