#conic gradients

[jcmarchi]

8 CSS & JavaScript Snippets for Creating Complex Gradients

New Post has been published on https://thedigitalinsider.com/8-css-javascript-snippets-for-creating-complex-gradients/

8 CSS & JavaScript Snippets for Creating Complex Gradients

Gradients are a true staple of web design. Their beauty lies in their versatility. Use them to make a big, bold statement. Or use them as an accent piece to create a mood.

The possibilities have never been greater. Modern CSS and JavaScript allow us to do more than mimic print design. We can use them to add movement and interactivity to the mix. But it goes deeper.

Gradients are no longer limited to container backgrounds. They can also style text content. It’s an opportunity to enhance headlines and calls to action.

So, what kinds of things can you do with gradients? We scanned the archives of CodePen to find eight great examples.

Grainy & Gradients Text Using color-mix by LukyVJ

This snippet uses the recent CSS color-mix property. The property simplifies the process of darkening, lightening, and desaturating colors. The result is a beautiful text gradient that allows the page background to come through. We don’t often associate gradients with graininess. But it works to perfection here.

See the Pen Grainy & Gradients text by LukyVJ

Single Element Gradient Background Patterns by Ana Tudor

Conic gradients add a unique twist to the element. The color transitions rotate around a center point. You can see it on display in this example. Each card sports a unique and intricate pattern.

See the Pen 1 element card background patterns (see description) by Ana Tudor

Animated Radial Gradient Pattern by Loktar

Gradients still make great backgrounds. And this animated presentation demonstrates how far they’ve come. It looks amazing. The relatively few lines of code that powers it are equally impressive.

See the Pen Moving Radial Gradient Pattern by Loktar

Single DIV Radial Gradient Swirl by Adam Argyle

How can a single div element contain so many colors? The magic is in multiple radial gradients. Four gradients start at the edges and meet in the middle. The result is a colorful delight.

See the Pen 4 Corner Radial Gradient Swirl by Adam Argyle

AI Prompt UI with Subtle Gradient by Vincent Durand

Check out the subtle gradient on this artificial intelligence (AI) interface. It cleverly mixes with glassmorphism to produce a unique aesthetic. The effect brings life to the page.

See the Pen Imagica – AI prompt UI by Vincent Durand

Radial Gradient Cursor Trailer by Uzo Awili

Here’s an example of gradients shining a light on a background image. Move your cursor and watch as it casts a bright pink hue. A tiny bit of CSS and JavaScript makes it work.

See the Pen Radial Gradient Cursor Trailer – Using Gradient Positioning by Uzo Awili

Magical CSS Blossoming Flowers at Night Md Usman Ansari

Gradients play a sizeable role in this “magical” snippet. They add dimension and allow the virtual plant life to fade into black. The CSS repeating-linear-gradient function simplifies the effect’s usage.

See the Pen CSS Blossoming Flowers at Magical Night by Md Usman Ansari

Complex Gradient Examples by Drew McConville

Combining multiple gradients into a CSS background can produce compelling results. Scroll through this snippet to see four such examples. You’ll find a mix of colors and gradient types. It may even convince you to do some experimentation.

See the Pen Complex Gradient Examples by Drew McConville

A Fresh Look at a Design Staple

There was a time when designers shied away from gradients. The era of flat design encouraged the use of solid colors. But we rightfully came back to them.

The examples above show that gradients are still a valuable tool. They add flavor to all sorts of design elements. And it seems like designers are constantly finding creative uses.

That speaks to their flexibility. You can tweak gradients in endless ways. Make them as simple or complex as you like.

Want to see even more CSS and JavaScript gradient ideas? Be sure to check out our CodePen collection!

Related Topics

[revenant-coining]

Conflaskobjehead

[ID: 3 rectangular flags with 13 horizontal lines. sizes in this order from top to bottom: medium, thin, 3 medium, thin, medium, thin, 3 medium, thin, medium. the 2nd outermost lines are wavy while the rest are straight. colors in this order from top to bottom: a gradient from black-green to pale green to black-green. on the first and third flags is a black-green humanoid bust icon, with the head and neck being separated. the third icon has a regular head while the first has a conical flask head. End ID]

requested by 🧪☢ anon

Conflaskobjehead: when your gender is related to conical flasks and object heads, having a conical flask as a head, your gender has a conical flask as a head, etc

Etymology: con(ical), flask, obje(ct), head

Pronounced: con flask ob-jeh head (con flask obje head)

@radiomogai , @oneofmanyarchives

[ID: a divider of a line of waves with a light blue to darker blue gradient. End ID]

[kandztuts]

CSS 4 💻 colors and color properties

New Post has been published on https://tuts.kandz.me/css-4-%f0%9f%92%bb-colors-and-color-properties/

CSS 4 💻 colors and color properties

everything about colors and color properties in CSS color, background-color, filter, border-color, rgb, hsl, rgba and more Colors in CSS can be specified by predefined names → red, blue, green, yellow, orange, purple, black, white, gray and more by hexadecimal values → #00FF00, by rgb → rgb(0,0,0) and hsl → (0, 100%, 50%) rgb uses red, green, blue values from 0 to 255 hsl uses hue (around the color wheel), saturation(how vibrant is it) ... ...and lightness( how much white or black is in it) you can also use rgba and hsla to specify the opacity, 0 → fully transparent and 1 → fully opaque rgba(255, 0, 0, 0.5) and hsla(22, 55%, 64%, 0.7) color → sets the text color background-color → sets tje background color border-color → sets the border color text-shadow → adds shadow to a text and you can specify the color too box-shadow → adds shadow to an element and you can specify the color too opacity → specifies the element's opacity values can be from 0 to 1 caret-color → is used to set the color of the text input cursor CSS supports gradients backgrounds background-image → adds a background image, but you can also specify a color linear-gradient → defines a linear-falling gradient from left to right, top to bottom etc. radial-gradient → creates a radial gradient like a circle or an ellipse conic-gradient → creates a conical gradient from the centre towards a specific angle you can also have repeating gradients. For that exist the properties... repeating-linear-gradient, repeating-radial-gradient filter → applies graphical effects like blur , contrast and more hue-rotate → rotates the color wheel by a specified angle brightness → changes the brightness contrast → changes the brightness grayscale → convets an image to a grayscale saturate → changes the saturation invert → inverts the colors sepia → converts an image to sepia tones

[exculis]

And now the conic gradients are being fucking assholes for no reason. Ok. Gotta bug fix those and THEN the calendar prompt bots should be almost guaranteed to not spit out boring white bgs anymore. They still will when the randomly selected calendar colors are white or close to white tho.

[confused-squirrel]

After the tight cloisters of the rest of Waterfall, this part of the cavern opens into a massive chamber, dwarfing you and the monster kid by your side. A subterranean lake stretches before you in a gradient of blues and greens and purples. Far beyond it, glowing faintly in the darkness, the city of New Home stretches toward the cavern roof, its smaller buildings clustered around a pale blue castle topped by conical spires and lined in stone parapets like a fairytale castle. Dozens of gems sparkle in the ceiling above like crown jewels, casting a soft light on the underground below. There it is. The end of your journey. It’s still a long way off, but for the first time you truly see, and comprehend, the magnitude of this kingdom. You and the monster kid stand silhouetted against the splendor of the view for a long time, keeping a reverent silence between you. Then, wordlessly, you both turn and continue along the path, the view remaining in your mind’s eye as you disappear into another enclosed tunnel.

[legendaryturtletheorist]

Enhancing Cell Culture Efficiency: The Evolution of the 24 Well Cell Culture Plate

In the realm of biological research, cell culture is an indispensable tool for studying cellular behavior, disease mechanisms, drug screening, and tissue engineering. Central to this practice is the humble yet pivotal tool known as the 24 well cell culture plate. Over the years, this essential piece of laboratory equipment has undergone significant evolution, adapting to the changing needs and advancing technologies of modern research.

The 24 well cell culture plate, a standardized multi-well plate designed for culturing cells, plays a critical role in facilitating various experiments simultaneously within a single plate. Each plate typically consists of 24 individual wells, each capable of accommodating cell culture media and cells for experimentation. Initially, these plates were simple in design, constructed from polystyrene or similar materials, and featured flat, round wells.

As research demands grew more complex, so did the requirements for cell culture plates. Scientists sought improvements in cell adhesion, surface treatments, and the ability to support various cell types. In response, manufacturers began to innovate, introducing surface modifications to enhance cell attachment, proliferation, and differentiation.

One of the significant advancements in 24 well cell culture plates is the development of treated surfaces that mimic the extracellular matrix (ECM), providing cells with a more natural environment for growth. These surfaces may be coated with substances like collagen, fibronectin, or laminin, which promote cell adhesion and improve overall cell health. Such enhancements have revolutionized cell culture techniques, enabling researchers to mimic in vivo conditions more accurately.

Furthermore, the design of the wells themselves has evolved to better accommodate specific experimental needs. Some plates feature conical well bottoms, which facilitate cell pellet formation and ease of media aspiration. Others incorporate unique geometries or surface coatings tailored for specific cell types, such as neurons or endothelial cells, optimizing conditions for their growth and function.

In addition to surface modifications, advancements in material science have contributed to the evolution of 24 well cell culture plates. Researchers now have access to plates made from specialized polymers that offer advantages such as improved optical clarity, reduced autofluorescence, and enhanced gas permeability. These features are particularly beneficial for live-cell imaging, high-content screening, and long-term culture experiments.

Moreover, the incorporation of innovative features like microfluidic channels and compartmentalized wells has expanded the functionality of 24 well cell culture plates. Microfluidic channels allow for precise control of fluid flow and gradient generation, enabling studies of cell migration, chemotaxis, and drug diffusion. Compartmentalized wells, on the other hand, facilitate co-culture experiments and spatially controlled cell interactions, mimicking complex cellular microenvironments.

As the field of cell culture continues to evolve, so too does the demand for versatility, reproducibility, and scalability in laboratory equipment. Manufacturers of 24 well cell culture plates have responded by introducing modular designs that enable seamless integration with automated liquid handling systems, robotic platforms, and high-throughput screening workflows. These advancements streamline experimental processes, improve data quality, and enhance research productivity.

Furthermore, the advent of advanced imaging techniques and analytical tools has spurred innovation in the design of 24 well cell culture plates. Plates with optically clear bottoms enable high-resolution microscopy and real-time monitoring of cellular dynamics. Integrated sensors and electrodes facilitate electrical impedance measurements, providing insights into cell viability, proliferation, and barrier function.

In the realm of drug discovery and development, 24 well cell culture plates play a crucial role in screening compounds for potential therapeutic effects. High-throughput screening platforms utilizing these plates enable rapid assessment of drug candidates across various cell lines and conditions. By miniaturizing assays and increasing throughput, researchers can accelerate the drug discovery process and identify promising candidates more efficiently.

Beyond traditional biomedical research, 24 well cell culture plates have found applications in diverse fields such as regenerative medicine, tissue engineering, and personalized medicine. In tissue engineering, for instance, these plates serve as scaffolds for growing three-dimensional (3D) tissue constructs, mimicking the architecture and function of native tissues. Such advancements hold promise for applications ranging from organ-on-a-chip models to patient-specific drug screening platforms.

In conclusion, the 24 well cell culture plate has undergone remarkable evolution, driven by the ever-changing needs of the scientific community and advances in technology. From simple polystyrene plates to sophisticated multi-functional platforms, these essential tools have revolutionized cell culture techniques and enabled groundbreaking discoveries in biomedical research. As we look to the future, continued innovation in the design and functionality of 24 well cell culture plates will undoubtedly further enhance their utility and impact across various fields of science and medicine.

[anonymous-ivplay]

Rain World Art Month '24 Day 9: Filtration System

FireAlpaca really needs more gradient options besides just linear and radial, I need like a conic gradient that functions like a radial so I don't have to do several layers of gradient and blur them together

[kenwu0310]

Firefox Release 123.0.1 , For Linux, Windows, & macOS

版本號：123.0.1 官方下載： https://www.mozilla.org/zh-TW/firefox/all 更新項目： 修復 Fixed the Firefox Translation language indicator in the address bar displaying a colored square icon instead of the language code icon. (Bug 1879415) Fixed incorrect rendering of Canvas2D conic gradients colors on Windows. (Bug 1851963) Fixed a regression with the onChange event not firing when clearing the value of a…

[editboxpro]

CSS Gradient Color generator , gradient generator , background gradient generator

Link: CSS Gradient Color Generator Now!

In the realm of web design, gradients add depth, dimension, and visual interest to websites, creating captivating visual effects and enhancing user experience. EditBoxPro’s CSS Gradient Color Generator offers a user-friendly solution for creating custom CSS gradients that elevate the aesthetics of your web projects. Let’s explore how EditBoxPro’s CSS Gradient Color Generator can empower web designers to unleash their creativity and bring their design visions to life.

Harnessing the Power of CSS Gradients

CSS gradients allow web designers to create smooth transitions between two or more colors, resulting in visually appealing backgrounds, buttons, overlays, and other design elements. Gradients add depth and texture to web interfaces, making them more engaging and immersive for users. With EditBoxPro’s CSS Gradient Color Generator, designers can easily experiment with different gradient styles, angles, and color combinations to achieve the desired visual effect for their websites.

Key Features of EditBoxPro’s CSS Gradient Color Generator

Intuitive Gradient Editor: EditBoxPro’s CSS Gradient Color Generator features an intuitive gradient editor that allows designers to create custom gradients with ease. Whether you prefer linear gradients, radial gradients, or conic gradients, our tool offers a range of options to suit your design needs.

Color Picker and Gradient Stops: Customize your gradients by selecting colors from a comprehensive color picker or entering hex codes manually. EditBoxPro’s Gradient Color Generator also allows you to add multiple gradient stops and adjust their positions and opacity levels for precise control over your gradient design.

Gradient Angle and Direction: Experiment with different gradient angles and directions to achieve the desired visual effect for your web design projects. EditBoxPro’s CSS Gradient Color Generator allows you to specify linear gradient angles, radial gradient shapes, and conic gradient starting points for endless design possibilities.

Preview and Code Export: Visualize your gradient designs in real time with EditBoxPro’s live preview feature. As you make changes to your gradient settings, our tool provides instant feedback, allowing you to see how your gradients will appear on the web. Once you’re satisfied with your design, you can easily export the CSS code and integrate it into your web projects.

Cross-Browser Compatibility: EditBoxPro’s CSS Gradient Color Generator ensures cross-browser compatibility by generating CSS code that works seamlessly across modern web browsers. Whether you’re targeting desktop or mobile users, our tool helps you create gradients that render consistently across different devices and platforms.

Advantages of Using EditBoxPro’s CSS Gradient Color Generator

Enhanced Visual Appeal: Elevate the visual appeal of your websites with stunning CSS gradients created using EditBoxPro’s Gradient Color Generator. Whether you’re designing headers, buttons, backgrounds, or overlays, gradients add depth, dimension, and sophistication to your web interfaces, making them more visually appealing and memorable for users.

Time-Saving Design Solution: Streamline your design process and save time with EditBoxPro’s CSS Gradient Color Generator, which offers a user-friendly interface and intuitive controls for creating custom gradients in minutes. Instead of manually coding gradients from scratch, designers can use our tool to experiment with different gradient styles and color combinations effortlessly.

Versatile Design Applications: Whether you’re designing personal websites, portfolio sites, e-commerce platforms, or corporate landing pages, EditBoxPro’s CSS Gradient Color Generator offers a versatile solution for integrating gradients into your web projects. From subtle color transitions to bold gradient effects, our tool empowers designers to create custom gradients that reflect their brand identity and design aesthetic.

Accessible Design Tool: EditBoxPro’s CSS Gradient Color Generator is accessible to designers of all skill levels, from beginners to experienced professionals. With its user-friendly interface and visual editor, our tool makes it easy for designers to experiment with gradients and create visually stunning web designs without the need for advanced coding knowledge.

Conclusion

Transform your web design projects with EditBoxPro’s CSS Gradient Color Generator. Whether you’re a seasoned web designer or just starting out, our tool provides the functionality, flexibility, and convenience you need to create custom gradients that enhance the visual appeal of your websites. Experience the power of CSS gradients, unleash your creativity, and elevate your web design game with EditBoxPro today!

Create Custom CSS Gradients with EditBoxPro’s CSS Gradient Color Generator Now!

gradient generator, gradient generator javascript, css gradient generator, background gradient generator, javascript gradient background generator, multiple color gradient generator, linear gradient generator, gradient color generator, gradient image generator, ultimate css gradient generator, background color generator, random color gradient generator, gradient, gradient color generator javascript, css gradient tutorial, linear gradient

[jennifer694125]

Unleashing the RuPaul Fierceness: A Glamorous Makeover for Traffic Safety Cones

In the world of road safety, traffic cones are the unsung heroes, quietly directing traffic and ensuring order on our streets. But what if we could inject a bit of glamour, flair, and the unapologetic fierceness of RuPaul into these mundane objects? This article explores the creative journey of transforming ordinary traffic safety cones into fabulous, attention-grabbing icons that not only enhance road safety but do so with a touch of RuPaul's signature style.

1. A Colorful Makeover: Embrace the Rainbow

The first step in this fabulous transformation is to bid farewell to the traditional orange hue and embrace the vibrancy of the rainbow. RuPaul is synonymous with bold, expressive colors, and your traffic safety cones should be no exception. Consider painting each cone in a different color or go for a gradient effect that not only catches the eye but turns the road into a runway of color.

2. Glamorous Accessories: Bedazzle and Bling

To truly capture the essence of RuPaul's fierceness, bedazzle your cones with glamorous accessories. Think rhinestones, glitter, and sequins. Transform these otherwise utilitarian objects into dazzling showstoppers that not only catch the light but also the attention of drivers. After all, safety can be glamorous, darling!

3. Witty and Inspirational Quotes: Slay the Day

RuPaul is known for his inspiring quotes and mantras that encourage self-expression and confidence. Apply the same philosophy to your traffic safety cones. Paint them with witty and empowering phrases that not only grab attention but also promote safe driving. Imagine a cone boldly declaring, "Cones say, 'Slay the Day, Drive the Fierce Way!'" – a message that combines safety with sass.

4. Runway-Ready Shapes: Beyond the Conical Norm

Break away from the conventional conical shape and redefine the silhouette of your traffic safety cones to mirror runway-worthy shapes. Think exaggerated flair, curves, and angles that make a statement. Imagine these cones sashaying down the road with a shape that not only directs traffic but also serves as an artistic expression of creativity and style.

5. Interactive LED Lights: Illuminate the Runway

To bring a dynamic element to your fierce traffic safety cones, introduce interactive LED lights. Create a light show that not only enhances visibility during low-light conditions but turns the road into a runway of illumination. Sync the lights to a playlist of RuPaul's greatest hits for a showstopping effect that turns safety into a visual spectacle.

6. Drag Queen Decals: Add a Touch of Glam

Pay homage to the drag queen aesthetic by adding fabulous drag queen decals to your cones. Picture RuPaul's iconic silhouette or the glamorous faces of drag royalty adorning each cone. It's a touch of glam that transforms these safety essentials into works of art, celebrating the bold and empowering spirit of drag culture.

7. Lip Sync for Your Life: Choreographed Cones

Take inspiration from RuPaul's Drag Race and choreograph your traffic safety cones to "lip sync for their lives." Arrange them in playful formations that mimic dance routines. It's a fun and engaging way to capture attention and inject some entertainment into the serious business of road safety. Picture cones sashaying in formation, encouraging drivers to approach safety with a sense of joy and engagement.

Conclusion: Strutting into Safety with Fierceness

In conclusion, the transformation of traffic safety cones into fierce and fabulous road warriors is not just a whimsical exercise but an imaginative way to rethink the mundane. By infusing the RuPaul flair into these everyday objects, we elevate their presence from functional to fabulous. Remember, safety doesn't have to be dull – let your traffic safety cones sashay, shantay, and slay on the road, reminding everyone that even in the realm of road safety, a touch of fierceness can make all the difference.

[jcmarchi]

CSS Tricks That Use Only One Gradient

New Post has been published on https://thedigitalinsider.com/css-tricks-that-use-only-one-gradient/

CSS Tricks That Use Only One Gradient

CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also know that I use them all the time. I use them for CSS patterns, nice CSS decorations, and even CSS loaders. But even so, gradients have a tough syntax that can get very complicated very quickly if you’re not paying attention.

In this article, we are not going to make complex stuff with CSS gradients. Instead, we’re keeping things simple and I am going to walk through all of the incredible things we can do with just one gradient.

Only one gradient? In this case, reading the doc should be enough, no?

No, not really. Follow along and you will see that gradients are easy at their most basic, but are super powerful if we push them — or in this case, just one — to their limits.

CSS patterns

One of the first things you learn with gradients is that we can establish repeatable patterns with them. You’ve probably seen some examples of checkerboard patterns in the wild. That’s something we can quickly pull off with a single CSS gradient. In this case, we can reach for the repeating-conic-gradient() function:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

A more verbose version of that without the background shorthand:

background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%); background-size: 100px 100px;

Either way, the result is the same:

Pretty simple so far, right? You have two colors that you can easily swap out for other colors, plus the background-size property to control the square shapes.

If we change the color stops — where one color stops and another starts — we get another cool pattern based on triangles:

background: repeating-conic-gradient(#000 0 12.5%, #fff 0 25%) 0 / 100px 100px;

If you compare the CSS for the two demos we’ve seen so far, you’ll see that all I did was divide the color stops in half, 25% to 12.5% and 50% to 25%.

Another one? Let’s go!

This time I’m working with CSS variables. I like this because variables make it infinitely easier to configure the gradients by updating a few values without actually touching the syntax. The calculation is a little more complex this time around, as it relies on trigonometric functions to get accurate values.

I know what you are thinking: Trigonometry? That sounds hard. That is certainly true, particularly if you’re new to CSS gradients. A good way to visualize the pattern is to disable the repetition using the no-repeat value. This isolates the pattern to one instance so that you clearly see what’s getting repeated. The following example declares background-image without a background-size so you can see the tile that repeats and better understand each gradient:

I want to avoid a step-by-step tutorial for each and every example we’re covering so that I can share lots more examples without getting lost in the weeds. Instead, I’ll point you to three articles you can refer to that get into those weeds and allow you to pick apart our examples.

I’ll also encourage you to open my online collection of patterns for even more examples. Most of the examples are made with multiple gradients, but there are plenty that use only one. The goal of this article is to learn a few “single gradient” tricks — but the ultimate goal is to be able to combine as many gradients as possible to create cool stuff!

Grid lines

Let’s start with the following example:

You might claim that this belongs under “Patterns” — and you are right! But let’s make it more flexible by adding variables for controlling the thickness and the total number of cells. In other words, let’s create a grid!

.grid-lines --n: 3; /* number of rows */ --m: 5; /* number of columns */ --s: 80px; /* control the size of the grid */ --t: 2px; /* the thickness */ width: calc(var(--m)*var(--s) + var(--t)); height: calc(var(--n)*var(--s) + var(--t)); background: conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0) 0 0/var(--s) var(--s);

First of all, let’s isolate the gradient to better understand the repetition (like we did in the previous section).

One repetition will give us a horizontal and a vertical line. The size of the gradient is controlled by the variable --s, so we define the width and height as a multiplier to get as many lines as we want to establish the grid pattern.

What’s with “+ var(--t)” in the equation?

The grid winds up like this without it:

We are missing lines at the right and the bottom which is logical considering the gradient we are using. To fix this, the gradient needs to be repeated one more time, but not at full size. For this reason, we are adding the thickness to the equation to have enough space for the extra repetition and the get the missing lines.

And what about a responsive configuration where the number of columns depends on the available space? We remove the --m variable and define the width like this:

width: calc(round(down, 100%, var(--s)) + var(--t));

Instead of multiplying things, we use the round() function to tell the browser to make the element full width and round the value to be a multiple of --s. In other words, the browser will find the multiplier for us!

Resize the below and see how the grid behaves:

In the future, we will also be able to do this with the calc-size() function:

width: calc-size(auto, round(down, size, var(--s)) + var(--t));

Using calc-size() is essentially the same as the last example, but instead of using 100% we consider auto to be the width value. It’s still early to adopt such syntax. You can test the result in the latest version of Chrome at the time of this writing:

Dashed lines

Let’s try something different: vertical (or horizontal) dashed lines where we can control everything.

.dashed-lines --t: 2px; /* thickness of the lines */ --g: 50px; /* gap between lines */ --s: 12px; /* size of the dashes */ background: conic-gradient(at var(--t) 50%, #0000 75%, #000 0) var(--g)/calc(var(--g) + var(--t)) var(--s);

Can you figure out how it works? Here is a figure with hints:

Try creating the horizontal version on your own. Here’s a demo that shows how I tackled it, but give it a try before peeking at it.

What about a grid with dashed lines — is that possible?

Yes, but using two gradients instead of one. The code is published over at my collection of CSS shapes. And yes, the responsive behavior is there as well!

Rainbow gradient

How would you create the following gradient in CSS?

You might start by picking as many color values along the rainbow as you can, then chaining them in a linear-gradient:

linear-gradient(90deg, red, yellow, green, /* etc. */, red);

Good idea, but it won’t get you all the way there. Plus, it requires you to juggle color stops and fuss with them until you get things just right.

There is a simpler solution. We can accomplish this with just one color!

background: linear-gradient(90deg in hsl longer hue, red 0 0);

I know, the syntax looks strange if you’re seeing the new color interpolation for the first time.

If I only declare this:

background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */

…the browser creates a gradient that goes from red to red… red everywhere! When we set this “in hsl“, we’re changing the color space used for the interpolation between the colors:

background: linear-gradient(90deg in hsl, red, red);

Now, the browser will create a gradient that goes from red to red… this time using the HSL color space rather than the default RGB color space. Nothing changes visually… still see red everywhere.

The longer hue bit is what’s interesting. When we’re in the HSL color space, the hue channel’s value is an angle unit (e.g., 25deg). You can see the HSL color space as a circle where the angle defines the position of the color within that circle.

Since it’s a circle, we can move between two points using a “short” path or “long” path.

If we consider the same point (red in our case) it means that the “short” path contains only red and the “long” path runs into all the colors as it traverses the color space.

Adam Argyle published a very detailed guide on high-definition colors in CSS. I recommend reading it because you will find all the features we’re covering (this section in particular) to get more context on how everything comes together.

We can use the same technique to create a color wheel using a conic-gradient:

background: conic-gradient(in hsl longer hue,red 0 0);

And while we are on the topic of CSS colors, I shared another fun trick that allows you to define an array of color values… yes, in CSS! And it only uses a single gradient as well.

Hover effects

Let’s do another exercise, this time working with hover effects. We tend to rely on pseudo-elements and extra elements when it comes to things like applying underlines and overlays on hover, and we tend to forget that gradients are equally, if not more, effective for getting the job done.

Case in point. Let’s use a single gradient to form an underline that slides on hover:

h3 background: linear-gradient(#1095c1 0 0) no-repeat var(--p,0) 100%/var(--p, 0) .1em; transition: 0.4s, background-position 0s; h3:hover --p: 100%;

You likely would have used a pseudo-element for this, right? I think that’s probably how most people would approach it. It’s a viable solution but I find that using a gradient instead results in cleaner, more concise CSS.

You might be interested in another article I wrote for CSS-Tricks where I use the same technique to create a wide variety of cool hover effects.

CSS shapes

Creating shapes with gradients is my favorite thing to do in CSS. I’ve been doing it for what feels like forever and love it so much that I published a “Modern Guide for Making CSS Shapes” over at Smashing Magazine earlier this year. I hope you check it out not only to learn more tricks but to see just how many shapes we can create with such a small amount of code — many that rely only on a single CSS gradient.

Some of my favorites include zig-zag borders:

…and “scooped” corners:

…as well as sparkles:

…and common icons like the plus sign:

I won’t get into the details of creating these shapes to avoid making this article long and boring. Read the guide and visit my CSS Shape collection and you’ll have everything you need to make these, and more!

Border image tricks

Let’s do one more before we put a cap on this. Earlier this year, I discovered how awesome the CSS border-image property is for creating different kinds of decorations and shapes. And guess what? border-image limits us to using just one gradient, so we are obliged to follow that restriction.

Again, just one gradient and we get a bunch of fun results. I’ll drop in my favorites like I did in the last section. Starting with a gradient overlay:

We can use this technique for a full-width background:

…as well as heading dividers:

…and even ribbons:

All of these have traditionally required hacks, magic numbers, and other workarounds. It’s awesome to see modern CSS making things more effortless. Go read my article on this topic to find all the interesting stuff you can make using border-image.

Wrapping up

I hope you enjoyed this collection of “single-gradient” tricks. Most folks I know tend to use gradients to create, well, gradients. But as we’ve seen, they are more powerful and can be used for lots of other things, like drawing shapes.

I like to add a reminder at the end of an article like this that the goal is not to restrict yourself to using one gradient. You can use more! The goal is to get a better handle on how gradients work and push them in interesting ways — that, in turn, makes us better at writing CSS. So, go forth and experiment — I’d love to see what you make!

[freefrontend-blog]

Background attached conic-gradient buttons 🤙 → https://codepen.io/jh3y/pen/QWZyxdg

[technsavi]

How To Create Dynamic Donut Charts With TailwindCSS And React — Smashing Magazine

In this article, Paul Scanlon shares a super lightweight approach to creating a Donut chart using conic-gradient(). There are no additional libraries to install or maintain, and there’s no heavy JavaScript that needs to be downloaded by the browser in order for them to work. Let’s explore! CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it (~2005 –…

[guanshentai]

The most commonly used centrifuge tube automatic production line solution in the laboratory

　　Centrifuge tube automation production line solution manufacturers know that the most inconspicuous consumable in the laboratory - centrifuge tube, is also the most commonly used consumable. In biological sciences, especially in the field of biochemistry and molecular biology research, centrifuge tubes are widely used, and every biochemistry and molecular biology laboratory is inseparable from centrifuge tubes. Every biochemistry laboratory will prepare various types of centrifuges. The working principle of the centrifuge tube is to rotate the solution at a high speed to generate centrifugal force, so that the suspended tiny particles settle at a certain speed, so as to achieve the purpose of separation from the solution.

　　1. Centrifuge tubes are classified according to material

　　Plastic centrifuge tubes: Plastic centrifuge tubes include polyethylene (PE), polycarbonate (PP), polypropylene (PP), etc. The advantages are transparent or translucent, and its hardness is small. The gradient can be taken out by puncture method. The disadvantage is that It is easy to deform, has poor corrosion resistance to organic solvents, and has a short service life. It is generally recommended to choose polypropylene centrifuge tubes.

　　Glass centrifuge tubes: Glass centrifuge tubes cannot withstand large centrifugal forces, and they need rubber pads when in use, and the airtightness is not good enough, so they are generally not used in high-speed centrifuges.

　　Steel centrifuge tube: Steel centrifuge tube has many advantages, such as high strength, no deformation, frost resistance, and corrosion resistance, so it has the widest range of use, but its surface is non-transparent, making it difficult to observe the separation. Although the corrosion resistance of steel centrifuge tubes is very good, it should also avoid contact with strong corrosive chemicals when using them.

　　2. Classified by capacity

　　Large-capacity centrifuge tubes (250mL, 500mL), also known as centrifuge bottles, are the centrifugal choice for large-capacity cell harvesting, pelleting and protein purification;

　　Ordinary centrifuge tubes (15mL, 50mL), the most common centrifuge tubes in laboratories;

　　Microcentrifuge tubes (0.6mL, 1.5mL, 2mL,) are often used in conjunction with microcentrifuges for the separation of micro reagents, and are often used in micromanipulation experiments in molecular biology.

　　3. Classified by bottom shape

　　Round bottom centrifuge tube: when collecting density gradients, you can choose a round bottom; the area of the round bottom is large, and it can withstand greater centrifugal force than the pointed bottom;

　　Conical bottom centrifuge tube: When the sample is small, when collecting the precipitate, use the conical bottom for better separation, and the upper layer is easier to absorb with a straw;

　　Flat-bottomed centrifuge tube: The purpose is the same as that of the conical-bottomed centrifuge tube, but the centrifuge tube can stand upright, which is more convenient to put and take out in the experiment. Other flat-bottomed centrifuge tubes are mostly centrifuge bottles and sample tubes.

　　4. Classified according to the closing method of the lid

　　Gland type: commonly used in microcentrifuge tubes;

　　Screw cap: It is often used for centrifuge tubes or centrifuge bottles with large capacity.

　　5. Classified by centrifugal speed

　　Low-speed centrifugation: generally refers to the maximum speed of less than 8000r/min, that is, 8000 rpm;

　　Normal speed centrifugation: generally refers to the maximum speed less than 15000r/min, that is, 15000 rpm;

　　High-speed centrifugation: generally refers to the maximum speed greater than 15,000 revolutions but less than 30,000 revolutions per minute.

　　In the case of such high centrifugal force, centrifuge tubes with poor tolerance will crack or even burst, which will lead to sample loss and unnecessary contamination. Sometimes it will even cause irreversible damage to the centrifuge, and the leaked aerosol will pose a threat to the health and safety of laboratory researchers, which is not conducive to the development and effective conduct of experiments.

[sasoarts]

Given name: The Unknown Callers

CHARACTERISTICS

The Nofilislings vaguely resembles a mammal, presumably a lemur or a genet. Their noses are straight and conical, and emits a low vibration when touched. Their ear patterns resemble the symbol used for Wi-Fi. Their hands, feet and tails are dexterous and strong. Their tipped, gradient fur makes them difficult to find, especially at night.

Skittish, they flee from any sudden movements. If not walking, they float and hover 4ft to 6ft off the ground. Their feet cannot make a sound,  not even if they break a twig!

A carcass shows that their insides are white and spongy, similar to a sponge or malt. Bite marks show that the Ichor glows bright-white and dissolves the spongy substance within minutes.

LOCATIONS AND SIGNS OF ACTIVITY

The Nofilislings can be found anywhere where there are wireless signals and frequencies. In an area with Wi-Fi and telephone use, the Nofilislings flicker into view and scout silently for other Borderlings. They cannot enter into deadzones where there's no signal for any wireless connection.

Calls and voicemails with no Caller ID, that play strange voices and sounds, are mostly from the Nofilislings' broadcasts. These Borderlings listen on to other Borderlings and the sounds from their pocket dimensions. With their ears and eyes glowing, they raise their tail upwards and point towards the other. Anything they hear are gathered within their ears. When finished, the Nofilislings find any device that can make and take calls, and then aim their tails again to manifest the sound into the device as a call or a voice message. This can help Witnesses find any Borderling in their area.

INTERACTION AND SAFETY MEASURES

If you see a white shimmer, watch it carefully.  Nofilislings won't like being touched unless they're someone's Personal Borderling.  Nofilislings quickly phase in and out of our reality and won't stay long after sending audio to an electronic device. Follow a Nofilisling if you want to find other Borderlings, but stay cautious. They might record audio from Borderlings that have a high threat level!

Nofilisling, formerly the Nomoling. Old art under the cut: