How’d you like to use CSS to easily create a border from an image or gradient?

The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.

CSS has a great new feature where you can specify the color space to use by adding in to the gradient (not yet supported in Firefox). This is especially useful

Generate better CSS gradients using alternative colour spaces & Bezier interpolation.

A Free tool to create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones to build the trendiest CSS gradients of 2023

A blog post by Patrick Brosset: Do you really understand CSS radial-gradients?

🙂

A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.

How to create text gradients in CSS using the background-clip property.

Do you know the feeling when a subject never lets you go? In the last years, I have worked with different graphics programs and have written many lines of CSS. Even though it is now easy to copy CSS code for gradients directly from e.g. Figma, I always had the feeling that gradients in graphics programs behave somewhat differently than gradients created with CSS. Especially the angle of a gradient sometimes seemed more like a random product to me. In the end, copying the CSS code often leads to

...

CSS gradients are represented by the gradient data type, a special type of image made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient()), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS. Generate Striped backgrounds using only CSS

A gradient generator that lets you explore the power of CSS gradients. Create shapes and CSS images using background gradients only.

Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that's there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired

Best gradients in one place.

In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful...

Sorry, looks like your browser window is less than 620px tall!  Flat UI  Flat UI Material Blues Gr...

The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you wil...

It all started with this question Keith Clark recently asked on twitter. CSS repeating-linear-gradie...

Playing with CSS3 gradients to obtain tiny, pixel-like pattern backgrounds....