I would like to know how to customize the sidebar widget by adding css.

Hi there,

can you share a link to your site where I can see the sidebar and that widget title ?

https://www.thewordcracker.com/en-us/

Do you have a site of your own with a Widget ? then I can see how that title is displayed and provide the correct CSS

Adding a CSS to the site does not implement it properly.

My site is the following site.

https://financeialnews.com/

Try this CSS:

.sidebar .widget h2 {
    font-size: 1.1em!important;
    margin-bottom: 15px!important;
    background-color: #1e73be;
    padding: 5px!important;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 1.66em;
    font-weight: 600;
    position: relative;
    display: block;
    letter-spacing: 1px;
}
.sidebar .widget h2::before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    height: 0;
    width: 0;
    margin-left: -10.5px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1e73be;
}

Can't you get rid of the side bars?
When adding widget, add CSS?

Can you explain a little more please ?

When you add the modified CSS, the widget is double-overlapped and the background is displayed as two.

Should I copy and insert the CSS when adding the widget?

See this Doc about using the Group block to keep the Title and the other content in the same space:

https://docs.generatepress.com/article/grouping-widgets/