cssgradient.io Open in urlscan Pro
18.245.31.90  Public Scan

Form analysis
0 forms found in the DOM

Text Content

CSS Gradient
 * Illustrations
   
 * Color Shades
 * Backgrounds
 * Swatches
 * Blog
 * SMART LAYOUTS New

Menu
 * Illustrations
   
 * Color Shades
 * Backgrounds
 * Swatches
 * Blog
 * Illustrations
 * SMART LAYOUTS


Color Code
hex
r
g
b
a




HEX


STOP


⊕

×
×
×
Linear Radial

Upload Image

1
2
3
4
5
6

CSS
Max Compatibility (IE6+)

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%,
rgba(0,212,255,1) 100%);

Copy to Clipboard

POWERED BY DESIGNSTRIPE



ABOUT THIS TOOL


CSS GRADIENT

CSS Gradient is a designstripe project that lets you create free gradient
backgrounds for your website. Besides being a css gradient generator, the site
is also chock-full of colorful content about gradients from technical articles
to real life gradient examples like Stripe and Instagram.


WHY WE MADE THIS?

See gradients were super played out back in the early web days, but now they’re
so ubiquitous that you’d be remiss not to drop them in your site, interface, or
next hair dye job.

Also, I'm part of a group of makers with a mission to build a better internet,
one digital project at a time. One of our recent project launches is Cool
Backgrounds another free design tool to generate background wallpaper for
websites, blogs and phones.


16 INSPIRING ILLUSTRATION TRENDS TO TRY IN 2023

ARTICLE


12 TIPS TO OPTIMIZE YOUR LANDING PAGES

ARTICLE


INTRODUCTION TO THE USAGE OF AI TO ENHANCE IMAGES AND VIDEOS

ARTICLE


15 PLACES TO GET UNIQUE DESIGN INSPIRATION

ARTICLE


COLOR SHADES

What's the foundation for beautiful gradients? Gorgeous shades of color, of
course! Our color shades pages curate a selection of popular colors, whether
you're looking for that wonderful soft baby blue or hyper lime green, check out
the shades pages.


Shades of Blue


Shades of Red


Shades of Green



SWATCHES

Don’t have enough time to make your own gradients? Looking for a supply of
popular gradients you can use for your projects? Our swatch collection features
a curated selection of gorgeous gradients and color combinations free for you to
use however you’d like. Each swatch comes with the basic code you’ll need to
implement it on your own website.

Browse the gallery


EXAMPLES

If you need a little inspiration before getting started on your own, our
gradient examples page is the best place to go. Sometimes all you need is a
little push—a source to jumpstart your creativity, and a couple gradient
examples could do just that for you. From Stripe to Scale API, browse the
examples to give you that jumpstart you need to start making fresh gradients on
your own.

Get inspired


BLOG

Interested in learing how to use blended colors? Our blog exposes the details of
everything gradients and even has some in-depth references for you to look at as
you learn how to code these elements yourself. Browse through our references,
tutorials, and articles for more information all about gradients.

Learn new tricks


RESOURCES

Is the basic information not enough for you? Want to learn more about the
inner-workings of gradients and everything to do with them? We’ve gathered some
killer resources to help you become a gradient expert, and they’re all available
for you here on our resources page. If you’re the kind of person who is always
seeking more knowledge, this is the page for you.

Dive deep into gradients


WHAT IS A GRADIENT?

Gradients are CSS elements of the image data type that show a transition between
two or more colors. These transitions are shown as either linear or radial.
Because they are of the image data type, gradients can be used anywhere an image
might be. The most popular use for gradients would be in a background element.

To put it more relevantly, gradients are part of an extremely popular design
trend that has been gaining popularity over the last several years. It seems
that they have always been around in the background (no pun intended); although,
some sources claim that the trend is “coming back”. Of course, it’s hard for
something to come back if it never left, but we’ll chalk that up to semantics.

Gradients allow you—the designer—to explore new opportunities to provide fresh,
clean designs for your audience. The added transition between colors allows you
to play with two-dimensional and seemingly three-dimensional aspects, taking
your designs from boring to extraordinary with some simple code.

In fact, the best thing about gradient code is that it can be as simple or as
complex as you’d like to make it. You can do the bare minimum and let the
browser figure out the rest, or you can take things into your own hands and
identify all the odds and ends. You could even do a little extra if you wanted
and explore the endless possibilities of gradients.


LINEAR GRADIENTS

Transitions in linear gradients occur along a straight line determined by an
angle or direction. A CSS linear gradient can be coded by using the
linear-gradient() function and can be as simple or complex as you would like. At
the very least, you’ll only need two colors to get started. From there, you
could add more colors, angles, directions, and more to customize your gradient
even further.

CODE

background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);

RESULT



If you leave the code at its most basic styling, the other elements will be
determined automatically by the browser. This includes the direction or angle
and color-stop positions. For more customized styling, you can specify these
values to create fun gradients with multiple colors or angled directions.
Playing with color-stop positions could also leave you with a solid pattern
instead of a traditional gradient. The possibilities are endless!

Compared to radial gradients, linear gradients are certainly more popular in
design and branding techniques. For example, you may have noticed the popular
music-streaming company, Spotify, and their gradient branding recently. Linear
gradients are, perhaps, the easiest way to incorporate this trend into your
creations, as they seem to blend smoothly with other design elements.


RADIAL GRADIENTS

A CSS radial gradient—although far less often seen—is just as beautiful and fun
as a linear gradient and can be implemented just as easily. With that said, the
code may seem more difficult to figure out at first. It is for this reason that,
for some designers, it may be easier to start out with a linear gradient.

CODE

background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);

RESULT



Of course, the code isn’t actually all that complicated at all. In fact, most of
the code is exactly the same as that of the linear gradient—with just a few
tweaks for extra radial customization. For example, unlike with linear
gradients, you can actually adjust the size of radial gradients in place of
where the direction would normally go. Playing with the different values that
determine these sizes can give you a lot of different results.

While radial gradients may not be as popular as their linear counterparts, it’s
possible that you might have seen them more often than you think. Special CSS
techniques can leave you with designs that may be unrecognizable when it comes
to the typical idea of what a linear or radial gradient may look like. In the
end, radial gradients are just as powerful to use and can give your designs an
extra kick of something special.


CSS GRADIENT TEXT

TUTORIAL


16 SUPER FIRE CSS GRADIENT EXAMPLES

ARTICLE


RADIAL GRADIENT CSS

REFERENCE


REPEATING LINEAR GRADIENT CSS

REFERENCE


HOW TO CREATE A GRADIENT IN POWERPOINT

TUTORIAL


YOU CRAZY? PATTERNS WITH CSS GRADIENTS

ARTICLE


HOW TO CREATE A GRADIENT IN PHOTOSHOP

TUTORIAL


HOW TO CREATE A GRADIENT BACKGROUND

TUTORIAL

CSS Gradient
© 2017 - 2024 Privacy policy Manage cookies

SHARING

 * 
 * 

PAGE

 * Blog
 * Color Shades
 * Swatches
 * Resources

NETWORK

 * How Many Plants
 * Cool Backgrounds
 * Designstripe
 * Drawkit

LINKS

 * Sitemap
 * Credit