CSS radial gradient as modal overlay background like Apple's

2k Views Asked by Geek Devigner At 04 April 2025 at 19:31

I couldn't seem to get it right. I want a radial gradient overlay similar to Apple's, but nothing I was doing seemed close. I'd like the center circle to have a 25% radius, but would settle for a 350px radius.

Original Q&A

There are 1 best solutions below

Olivier Refalo On 14 August 2011 at 15:19 BEST ANSWER

They do it like this, yet I've seen newer versions user a <canvas>. Note that for IE or Opera, you will need a transparent png (not included in the css code below)

HTML:

<html>
<head>
    <link rel="stylesheet" href="gogo.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body class=" bg">
<div class="radialbg">
HEELO WORLD
</div>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
}

.bg {
    background: url(pattern.jpeg) repeat;
}

.radialbg {
    background: transparent -webkit-gradient(radial, center center, 50, center center, 460, from(transparent), to(#000));
    background: -moz-radial-gradient(circle, transparent, #000);
    width: 100%;
    height: 100%;
}

CSS radial gradient as modal overlay background like Apple's

There are 1 best solutions below

Related Questions in CSS

Related Questions in RADIAL-GRADIENTS

Trending Questions

Popular # Hahtags

Popular Questions