Negative position on radial gradient?

Hi there,

I have the following CSS gradient:

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5c3f8e+0,341d5b+100 */

background: #5c3f8e; /* Old browsers */

background: -moz-radial-gradient(center, ellipse cover, #5c3f8e 0%, #341d5b 100%); /* FF3.6-15 */

background: -webkit-radial-gradient(center, ellipse cover, #5c3f8e 0%,#341d5b 100%); /* Chrome10-25,Safari5.1-6 */

background: radial-gradient(ellipse at center, #5c3f8e 0%,#341d5b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c3f8e', endColorstr='#341d5b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

At the moment, the lighter colour is in the center and appears oval shaped if the container is not square.

Is it possible to make the lighter colour appear circular and then place it negatively towards the top so that the circle is not in the middle?

This is what I am trying to achieve:

Any ideas on how to do this would be great :slight_smile:

Hi there toolman,

something like this maybe…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>radial and linear gradient</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#container {
    max-width: 24em; 
    min-height: 14.88em;
    margin: 1em auto;
    border: 1px solid #204;
    border-radius: 0.5em;
    background-image: radial-gradient( ellipse at top, #ffefef , #341f8e ),
                      linear-gradient( to bottom, #5c3f8e , #341d5b );
    box-shadow: 0 0 1em rgba( 0, 0, 0, 0.75 );
 }
</style>

</head>
<body> 

 <div id="container"></div>

</body>
</html>

coothead

1 Like

Thank you coothead :slight_smile:

I now have this:

background-image: radial-gradient( ellipse at top, #5b3c90 , #341d5b );
background-color: #341d5b;

Is there a way to make the “circle” in the lighter colour smaller?

Hi there toolman,

play around with these values…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>radial and linear gradient</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#container {
    max-width: 24em; 
    min-height: 14.88em;
    margin: 1em auto;
    border: 1px solid #204;
    border-radius: 0.5em;
    background-image: radial-gradient( circle at top, #fff 0%, #fed 4%, #9f7fcf 20%, #341d5b 100%);
    box-shadow: 0 0 1em rgba( 0, 0, 0, 0.75 );
 }
</style>

</head>
<body> 

 <div id="container"></div>

</body>
</html>

…until you create the effect that you desire. :winky:

coothead

2 Likes

Hi there toolman,

if you want a more distinct circle, play with this…

    background-image: radial-gradient( circle at top, #fff 0%, #fed 4%,transparent 20%, transparent 100%),
                      linear-gradient( to bottom, #5c3f8e , #341d5b );

coothead

2 Likes

Thank you coothead, that’s exactly what I meant! :smiley:

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.