CSS3 Transparency + Gradient

by

Yes. You can use rgba in both webkit and moz gradient declarations:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

(src)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(src)

Apparently you can even do this in IE, using an odd “extended hex” syntax. The first pair (in the example 55) refers to the level of opacity:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

(src)

More Related Contents:

  1. How do I combine a background-image and CSS3 gradient on the same element?
  2. Use CSS3 transitions with gradient backgrounds
  3. Gradient borders
  4. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  5. Gradient text color
  6. Gradients in Internet Explorer 9
  7. Can you add noise to a CSS3 gradient?
  8. SVG gradient using CSS
  9. Using CSS, can you apply a gradient mask to fade to the background over text?
  10. Blocky gradient effect in CSS3
  11. How can I prevent CSS gradient banding?
  12. css text gradient
  13. CSS gradient checkerboard pattern
  14. Fade image to transparent like a gradient
  15. Fixed gradient background with css
  16. Can I have multiple background images using CSS?
  17. what exactly is device pixel ratio?
  18. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  19. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  20. css z-index issue with nested elements
  21. Remove Safari/Chrome textinput/textarea glow
  22. CSS for star ratings via FontAwesome
  23. Multiple descendant children selector with css [duplicate]
  24. How does the CSS specificity work? [duplicate]
  25. Transparent hollow or cut out shape in HTML
  26. Pass function or mixin by reference in SASS
  27. What CSS selector can be used to select the first div within another div
  28. Contain an image within a div?
  29. using a div to blur an image behind it? [duplicate]
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment