Css3 Gradients to Reproduce an 'Inner Glow' Effect from Illustrator with Border-Radius Applied

CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

It seems like you're trying to produce a gradient to replicate this:

"I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center."

You can do exactly that using an inset box-shadow. For example:

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);

CSS3 Gradients and border-radius leading to extraneous background in webkit

Finally, after an awfully long time, someone much cleverer than I has a solution to this:

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

is your friend :)

From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

Inner glow effect of button

I made a jsFiddle showing this effect:

a {
    -webkit-box-shadow: inset 0 0 30px #00f;
    -moz-box-shadow: inset 0 0 30px #00f;
    box-shadow: inset 0 0 30px #00f;
}

---

Edit: in response to your comment: Here's a much sexier version.

Weird effect when applying transparent border over an element with a gradient background

That's because the starting and ending points of the gradient are at the edges of the padding-box and border is rendered outside the padding-box. So, the borders look funny because the background is repeated on each side outside the padding-box to cover the border-box.

The box-shadow:inset is rendered inside the padding-box (just like background) and gives visually the same effect as a border, so you could try using that in place of border:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

Because a box-shadow doesn't take up any space, you need to increase your padding accordingly.

Illustration of padding-box and border-box:

Demo http://jsfiddle.net/ilpo/fzndodgx/5/

Button shine/glow with CSS3

CSS3's radial gradients let you achieve a similar effect, although using a CSS background image may be easier for pixel-perfect adjustments. Specifically, CSS3's gradients are linear, even the radial ones.

I've constructed a small example using Firefox's radial gradients (support for Webkit will require quite different code): http://jsfiddle.net/rxMf6/

HTML:

<div class="highlighted-button">
    <div class="highlight"></div>
    Button
</div>

CSS:

.highlighted-button {
    background: #000;
    color: #fff;
    font: bold 0.8em Arial, sans-serif;
    padding-bottom: 0.9em;
    text-align: center;
    text-transform: uppercase;
    width: 8em;
}

.highlight {
    background: -moz-radial-gradient(center top, ellipse farthest-side,
                                     #fff 0%, #000 100%);
    height: 0.5em;
    margin-bottom: 0.4em;
}

How to make a colorful gradient glow around your input-box?

I think you can do that by using two additional divs. One to be the wrap (also having the background gradient) with an white inset box shadow for the feather effect, and one div behind the input area with a white background and outer box shadow.

I assumed that you form background color is white.

.rainbowWrap {
    width: 200px;
    background: //your gradient...
    padding: 4px;
    box-shadow: inset 0px 0px 5px 3px white;
    border-radius: 2px;
    position:relative;
    z-index: 1;
}

.rainbowBg {
    width: 184px;
    height:15px;
    background: white;
    position:absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0px 0px 7px 2px white, 0px 0px 13px 2px white;
    border-radius: 4px;
    z-index: 2;
}

.rainbow {
    width:186px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 4px;    
    outline:none;
    display: block;
    position:relative;
    z-index: 500;
    color:#666;
}

Note that I have only wrote code and only tested in Google Chrome.

Fiddle: http://jsfiddle.net/b03acbdu/5/

CSS Gradients - negative border radius

Yes. Instead of trying to put the orange element on top, put it on the bottom, where the teal element can have the border radius instead (and the orange one shows through). Simple example:

#thing {  width: 400px;  height: 200px;  background-color: teal;  border-bottom-right-radius: 50%;  position: relative;}
#thing:after {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: orange;  z-index: -1;}

<div id="thing"></div>

Dynamic stamp effect using radial-gradient

In order to achieve this desired result, I was forced to place your image as a background of your .stamp class.

From here, i was able to use a pseudo element to apply the radial background, setting its height and width to show outside of the shape you were looking for.

html {  text-align: center;  background: #aaa;  margin-top: 20%;}.stamp {  display: inline-block;  position: relative;  background: url(http://qualityLessons.net/Assets/images/css3html5.png);  background-size: 100% 100%;  height: 300px;  width: 300px;  margin: 10px;}.stamp:before {  content: "";  position: absolute;  top: -8px;  left: -8px;  height: calc(100% + 20px);  width: calc(100% + 20px);  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);  background-size: 20px 20px;  background-position: 10px 10px;  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));  z-index: -2;}.image2 {  background: url(http://lorempixel.com/300/300);  height: 200px;  width: 280px;}

<div class="stamp"></div><br /><div class="stamp image2"></div>

CSS3 border radius + different border width, ugly transition

Add

    border-bottom-left-radius:10px 20px;
    border-bottom-right-radius:10px 20px;

reference : http://www.w3.org/TR/css3-background/#the-border-radius

---

for mozilla use

    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft

if you want, although it handles the issue automatically (if you fix the typo p to px in the example).

reference: https://developer.mozilla.org/en/CSS/border-bottom-right-radius

---

Related Topics