I'm wondering if I can get a sort of glass-effect border around boxes in CSS. For example, a navigation div
that contains a ul
etc. Here's an example of what I mean
3 Answers
A glass effect in 2020
When I answered this in 2012, I used only features that were well-supported by browsers at that time. You can find it below for posterity, but first I'll share a slightly more interesting glass effect which looks a bit different from the one in the original question.
I also no longer care so much about an extra element or two, but if you hate presentational elements, check out the old answer to see how you can use a pseudoelement to avoid them.
Full demo
.glass {
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0, 0%, 100%, 0.44) 24%,
hsla(0, 0%, 100%, 0.4) 25%,
hsla(0, 0%, 100%, 0.2) 45%,
hsla(0, 0%, 100%, 0.1)
);
background-size: 300% 100%;
border-radius: 10px;
box-shadow:
0 2px 1px hsla(0, 0%, 100%, 0.5) inset,
0 -2px 1px hsla(250, 70%, 5%, 0.3) inset,
0 -2px 6px hsla(0, 0%, 100%, 0.25);
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 17px/21px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
idth: 100%;
}
.frame {
padding: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
background: lemonchiffon;
border: 1px solid sienna;
padding: 20px 25px;
width: 300px;
}
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}
<div class="glass frame centered">
<section class="content">
<p>A glass-effect frame using pure CSS.</p>
</section>
</div>
Breaking it down
Backdrop filter
Blurring what lies behind the pane gives the impression that light is being defocused as it passes through the glass. Also, the contrast and brightness are increased to make the background stand out through the surface reflection effect.
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
CSS gradients
This conveys the impression of light reflecting non-uniformly from the surface of the glass. This example uses a radial gradient to imply a light source a finite distance from the pane, but you could also use a linear or conical gradient (less support) to convey a different lighting effect.
The background size is also increased so that the edges of the ellipse do not show.
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0,0%,100%,.44) 24%,
hsla(0,0%,100%,.4) 25%,
hsla(0,0%,100%,.2) 45%,
hsla(0,0%,100%,.1)
);
background-size: 300% 100%;
Multiple box shadows
A couple of inset shadows are used to highlight the top edge and shade the other, while an outer shadow implies that light is being cast onto the background around the edges of the box. Changing the position and intensity of these shadows will imply different things about the position of the implied light source.
box-shadow:
0 2px 1px hsla(0,0%,100%,.5) inset, /* Highlight upper edge */
0 -2px 1px hsla(250,70%,5%,.3) inset, /* Shade lower edge */
0 -2px 6px hsla(0,0%,100%,.5); /* Imply light cast around the edges */
A glass effect in 2012 (original answer)
You can achieve an effect very close to this—almost identical to the example in the question—using simpler CSS. This example uses a single element with an RGBA border colour and multiple box shadows to add the highlights and shadows.
.box {
background: #f0edcc;
background-clip: padding-box; /* Background stops at border */
border: 4px solid rgba(255,255,255,.2);
border-radius: 3px;
box-shadow:
0 0 1px rgba(255,255,255,.8), /* Bright outer highlight */
0 0 3px rgba(0,0,0,.8), /* Outer shadow */
1px 1px 0 rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
-1px -1px 0 rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
padding: 10px;
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}
.box {
bottom:0;
height: 150px;
left:0;
margin:auto;
position:absolute;
top:0;
right:0;
width: 250px;
}
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
<div class="box">Your message.</div>
Note that box-shadow
and RGBA border colours are only supported in IE9+ and more recent versions of Firefox, Chrome, Opera and Safari. (Although older versions of the latter browsers may support prefixed versions of the property.) In browsers that don't support either, this degrades to just the inner yellow box.
-
1This is very well written. Thanks especially for updating the answer. Nov 18, 2021 at 18:47
You can't create a Glass/Blur effect width CSS for now. But width transparent border and box shadow you can attenuate the background.
You can see the result in my jsfiddle : http://jsfiddle.net/DoubleYo/hyETB/1/
-
+1 (Even though I'd change the shadow to something more close to this: box-shadow: 0 .0 20px rgba(0, 0, 0, .5),0 .0 10px rgba(0, 0, 0, .52);) May 15, 2012 at 14:48
-
Why was this answer downvoted without a comment? That's really unhelpful, it was a good attempt. Upvoting. Mar 13, 2013 at 10:09
Since there is a pattern in the example border, you will probably need one or more PNG background images with alpha channel (so that the parent's background can shine through where and to the extent desired); borders with uniform RGBA colors alone will not suffice here.
Then nest another block element in the element that has that background. With one background image, example HTML:
<div id="glass-box">
<div id="inner">
<p>Text</p>
</div>
</div>
Example CSS:
#glass-box
{
background: transparent url(glass.png) 0 0 no-repeat;
}
#glass-box #inner
{
margin: 10px;
background-color: white;
}
Instead of transparent
you might want to try an RGBA color with opacity < 1.0; perhaps you would use a semi-transparent greyscale glass background image which you could project on top of any hue.
Until multiple borders are better supported natively (see my comment), you can achieve multiple borders by nesting block elements and giving each one different borders. Margins on some of those elements will help to reduce the number of elements that need to be nested for the desired effect.
And until CSS Backgrounds and Borders Level 3's multiple background images are better supported (but it is a CR already, so you may be lucky), you can achieve the illusion of multiple background images by using differently positioned (different) background images for nested (positioned) block elements. That way you do not need a box and background image of fixed size.